时间戳

首页 > 解决方案 > 响应式选择框

css - 响应式选择框

问题描述

我正在使用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 像素）时，它运行良好但没有响应。

标签： cssresponsive-designresponsiveunsemantic-css

解决方案

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

    select{
     display : block;
     width : 100%
    }

推荐阅读