CSS显示内联块未在同一行上显示div

问题描述 投票:0回答:1

这是我的div:

<div class="results" id="order" onChange={(event) => this.handleSelect(event,"order")}>
    <h3 id="order-title-select">{t('list.order')}</h3>
    <select id="order-select">
        <option value="Newest publications">{t('list.newest')}</option>
        <option value="Oldest publications">{t('list.oldest')}</option>
        <option value="Ascending order">{t('list.lowest')}</option>
        <option value="Descending order">{t('list.highest')}</option>                 
    </select>
</div>

和CSS:

.results {
    display: inline-block;
    width: 50%;
}

#order-title-select {
    float: right;
    margin-left: 20px;
    font-size: 16px !important;
    margin-top: 25px !important;
}

#order-select {
    display: inline-block;
    float: right;
    margin-left: 8px;
    margin-right: 10px;
    margin-top: 23px;
    border: 1px solid #FD8907;
    border-radius: 5px;
    color: #555;
    font-family: inherit;
    font-size: inherit;
    box-shadow: none;
}

我希望h3和select元素彼此相邻。原来看起来像这样:

enter image description here

还有为什么选择框内的文本看起来像这样?

html css
1个回答
0
投票

Output

CSS

.results {
        display: inline-block;
        width: 50%;
    }

    #order-title-select {
        margin-left: 20px;
        font-size: 16px !important;
        margin-top: 25px !important;
        display: inline-block;
    }

    #order-select {
        display: inline-block;
        /* float: right; */
        margin-left: 8px;
        margin-right: 10px;
        margin-top: 23px;
        border: 1px solid #FD8907;
        border-radius: 5px;
        color: #555;
        font-family: inherit;
        font-size: inherit;
        box-shadow: none;
    }

display:inline-block,并从#order-title-select中删除浮点:右移>>

display:inline-block;由于float:right;而被忽略。如果“ float”的值不是“ none”,则该框是浮动的,并且“ display”被视为“ block”,因此请避免同时使用display:inline-blockfloat:right

© www.soinside.com 2019 - 2024. All rights reserved.