如何使不同类型的输入元素具有相同的宽度？

Posted 2023-03-05

【中文标题】如何使不同类型的输入元素具有相同的宽度？

【英文标题】：How do I make different types of input elements have the same width?

【发布时间】：2020-04-07 06:18:49

【问题描述】：

.form-control, .custom-select 
    /* center form controls */
    display: inline-block;
    /* override Bootstrap's 100% width for form controls */
    width: auto;

<form action="/" method='post'>
    <br>
    <div class="form-group">
      <select name="show_ID" required="required" class="custom-select">
        <option selected>Select something</option>
        <option value="Something1">Something 1</option>
        <option value="Something2">Something 2</option>
      </select>
    </div>

  </div>
    <div class="form-group">
      <input class="form-control" name="something2" placeholder="Something 2" type="text"/>
    </div>
</form>

这里感兴趣的是两个 Bootstrap 元素 .form-control 和 .custom-select。每个选择框的 html 如下所示，尽管每个选择框的选项文本长度不同：

如您所见，自定义选择框中的表单框彼此不匹配，表单控件框也不匹配，即使两者具有完全相同的样式规范。

我猜发生的事情是自动在文本框上工作，因为没有预先存在的文本来调整框的大小，但是在确实有 pre 的框上自动转换为“基于内容” - 现有文本（即自定义选择）。

表单控件的自动调整大小在一个只使用表单控件的 HTML 页面上运行良好，但在另一个页面上我需要同时使用表单控件和自定义选择，这就是大小成为问题的地方。我尝试为自定义选择设置特定大小（例如 65%），但即使我找到了一种方法来匹配桌面上的不同框大小（所有自定义选择框与表单控制框），在移动设备他们再次关闭，因为自动意味着与手机上的 65% 不同。

我怎样才能使所有盒子的尺寸都一样 - 无论是在桌面设备上还是在移动设备上？

【问题讨论】：

抱歉，您能澄清一下您的问题是什么吗？您的问题是 CSS 没有在两个单独的页面上实现，还是在桌面和移动设备上看起来不一样？

问题是在两个类混合的页面上，框的大小不同。我想要完成的是让盒子的大小相同。我可以通过在自定义选择上设置一个特定的百分比来设置它，但是一旦有人使用移动设备，这将不会持续。有意义吗？

因此，如果我理解您的进一步解释，您正在尝试确保您的布局看起来相同，或者至少在不同的设备上是合适的，对吧_如果是这样，您应该研究响应式设计和媒体查询，允许您为特定屏幕尺寸调整所需元素的大小。看看这个：w3schools.com/css/css_rwd_mediaqueries.asp

是的，这已经在我的 CSS 样式表中了。没有帮助。如果我必须将 .custom-select 硬编码为特定大小，这也无济于事。

【参考方案1】：

试试这个：它对我有用。

[Here You Go:][1]


  [1]: https://jsfiddle.net/whr4yc9v/1/

【讨论】：

我相信这会使桌面上的宽度达到 100%，对吧？我试图避免这种情况。

您可以指定特定的宽度。 @thestacker