这是我的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元素彼此相邻。原来看起来像这样:
还有为什么选择框内的文本看起来像这样?
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;
由于float:right;
而被忽略。如果“ float”的值不是“ none”,则该框是浮动的,并且“ display”被视为“ block”,因此请避免同时使用display:inline-block
和float:right
。