Question

我有一个非常简单的表格。通常：标签和输入。目标是创建一个简单的响应形式。一切正常，除非表单包含select输入太大。出于某种原因，调整浏览器时select输入不会缩小。其他输入（input，textarea）会随着浏览器的大小调整而缩小。

我尝试在选择输入上使用max-width：100％，就像其他人在这里建议的那样，没有成功。

我创造了一个解释一切的jsfiddle： https://jsfiddle.net/ampr41po/3/

这是HTML

<div class="form-main">
  <form action method>
    <div class="controlUnit">
      <div class="label">
        <label for="firstname">First name</label>
      </div>
      <div class="control">
        <input id="firstname" name="firstname" type="text" autofocus value="">
      </div>
    </div>
    <div class="controlUnit">
      <div class="label">
        <label for="name">Name</label>
      </div>
      <div class="control">
        <select id="name" name="name">
          <option value="1">Name goes here</option>
          <option value="2">Name</option>
          <option value="3">This is a very very very very very long name. The name is mwpekng erter erter erter 4et erter 4ertye rwe 45y 43 rt rty rty rt rty rty </option>
          <option value="4">Another name</option>
        </select>
        <span class="icon-item"></span>
        <span class="icon-item"></span>
        <span class="icon-item"></span>
      </div>
    </div>
  </form>
</div>

CSS：

* {
  box-sizing: border-box;
}

.form-main {
  background-color: red;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 15px;
}

.controlUnit {
  display: flex;
}

.controlUnit .label {
  flex: 0 0 100px;
  text-align: right;
  padding-right: 10px;
}

.controlUnit .control {
  flex: 1 1 auto;
  display: flex;
}

select {
  max-width: 100%;
}

input#firstname {
  width: 100%;
}

.icon-item {
  width: 20px;
  height: 20px;
  background-color: yellow;
  margin-left: 10px;
}

.icon-item ~ .icon-item {
  margin-left: 5px;
}

Answer 1

尝试在CSS代码中使用width: 100%代替max-width: 100%代替select，以便在所有屏幕尺寸上都拥有响应式select元素。

设置max-width: 100%的方法是错误的，因为select元素是表单控件元素，因此必须遵循一些隐式规则。例如，使用select时，option元素的宽度不能比其最宽max-width更窄。这是通过浏览器实现的，你无法改变它。因此，除非您明确设置width，否则没有其他方法可以实现响应式设计。

查看更新的jsfiddle here。

如何在调整浏览器大小时缩小选择输入？

1 个答案: