Question

我想增加选择框元素之间的行间距。

我尝试line-height和min-height，但这会影响选择框元素间距。

我可以使用哪个属性？

.input {
    padding-bottom:5px;
    margin-right:8px !important;
    margin:4px;
}

我有min-height：

select, textarea {
    background: #eee;
    border: 1px solid #aaa;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    min-height: 30px;
    font-weight: normal;
}

我有line-height：

select, textarea { 
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Answer 1

如果您想要选择框中元素的间距，则在不在选择框上的元素上应用css。

选择框元素为<option>

使用此css

select option { 
    line-height: 20px;
}

Answer 2

对于使用“select”属性（大小大于 0）的“size”元素，请尝试在选项上使用填充：

<select multiple>
    <option style="padding: 10px" value="1">Option 1</option>
    <option style="padding: 10px" value="2">Option 2</option>
    <option style="padding: 10px" value="3">Option 3</option>
    <option style="padding: 10px" value="4">Option 4</option>
</select>

CSS如何增加选择框元素之间的行间距

2 个答案: