Question

我有一些包含表单输入数据的div。其中一个是一个选择，里面有一些类似占位符的文本。我希望选择框与文本一样宽，我希望其他div也占用这个宽度。

这是html：

<div class="row">
    <div class="form-group">
        <label for="category_type">Category Type:</label>

        <select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
            <option value="" disabled selected>If there is a matching type for the category, please select it</option>

            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
</div>
<div class="row">
    <div class="form-group">
        <label for="name">Name:</label>
        <input name="name" class="form-control"/>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <label for="description">Description:</label>
        <input name="description" class="form-control"/>
    </div>
</div>

这是css：

.form-group{
  display: inline-block;
}
.row{
  width: 100%
  float: left;
  margin-left: 5%;
}

现在，选择下拉列表比任何其他表单组元素都要宽。是否有可能让所有表单组元素具有相同的宽度，并且只占用选择所需的宽度才能显示所有文本？

Here是这个例子的小提琴。

编辑：我不想使用宽度：100％用于表单组，我真的不想设置form-group的宽度。我希望它占用所需的最小宽度，使其足够宽，以便选择文本。

Answer 1

您可以使用 jQuery的 each()函数并获取每个元素的宽度。请看下面的代码段：

var max = 0;

$('.form-control').each(function(i) {
  if(max < $(this).width()) {
    max = $(this).width();
  }
});

$('.form-control').css('width', max);

.form-group{
  display: inline-block;
}
.row{
  width: 100%
  float: left;
  margin-left: 5%;
}
.content {
  padding: 20px 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="content">
  
<div class="row">
    <div class="form-group">
        <label for="category_type">Category Type:</label>

        <select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
            <option value="" disabled selected>If there is a matching type for the category, please select it</option>

            <option value="1">A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </div>
</div>
<div class="row">
    <div class="form-group">
        <label for="name">Name:</label>
        <input name="name" class="form-control"/>
    </div>
</div>

<div class="row">
    <div class="form-group">
        <label for="description">Description:</label>
        <input name="description" class="form-control"/>
    </div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

希望这有帮助！

Answer 2

您的选择下拉宽度将自动调整为文字宽度。

因为您已设置.form-control{width: 100%;}

如果您希望输入宽度与选择宽度相同，则必须为所有宽度设置固定值

类似于.form-control{width: 250px;}

Fiddle

Answer 3

表格布局：固定的表格将解决问题。使用表并将行div放在表行

中

https://jsfiddle.net/9r62L7Lh/5/

.form-group{
      display: block;
}
.row{
  width: 100%
}
table {
    margin-left: 5%;
  table-layout: fixed;
}
input {
  width: 100%;
}

使三个div占据最大的宽度

3 个答案: