css - 响应式选择框

Question

我正在使用 unsemantic.css ，有一个基本的布局:

<div class="grid-container">
  <div class="grid-65">
    Some content here
  </div>

  <div class="grid-35">
    <select>
      <option value="0">First option</option>
      <option value="1">Second</option>
    </select>
  </div>
</div>

我希望选择框的宽度等于它的父 div(网格行的 35%)。此元素的默认宽度由其选项的长度决定。

尝试过:

select {
  width: 100%;
}

但这对一切都没有影响。 当我将宽度设置为某个特定值 (500 像素) 时，它运行良好但没有响应。

Answer 1

你好 Matěj Štágl 问题是默认情况下选择是一个内联 block 。 只需将其设为 block 元素并将其宽度设置为 100%，它就会响应。 以下代码将帮助您解决问题。

    select{
     display : block;
     width : 100%
    }