Question

我的目标是在块内输入字段的大小为100％。（我使用内联块）。我试过这种方式但没有成功。

HTML

<div id="search-blk">
  <p>
    <label>One</label>
    <label class="field">
    <select name="obj" id="obj" class="fieldmax">
        <option value="">All</option>
        <option value="1">One</option>
    </select>
    </label>
  </p>
</div>

CSS

#search-blk p {
  height: 30px;
  background: #ccc;
  width: 400px;
}

#search-blk p label {
  display: inline-block;
  width: 70px;
}

input, textarea, select { 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 10px; 
  padding: 3px; 
  width: 200px; 
  border: 1px solid #ccc; 
  margin-right: 0px; 
  box-sizing: border-box;   
  -moz-box-sizing: border-box;  
  -webkit-box-sizing: border-box; 
  background: #fdfdfd;
}

.field {
  width: 300px;
  border: 1px solid #000;
}   

.fieldmax {
  width: 100%;
}

JSFiddle

你可以这样做吗？我怎么能这样做？感谢

Answer 1

如果您使用的是display: inline-block，请注释掉空白区域，否则会产生不需要的空间。见演示。
您正在将select包裹在label内。为什么？如果需要，只需使用label for属性。
通过在p内引入额外的div，无需使标记复杂化。

演示：http://jsfiddle.net/abhitalks/ybx6z/4/

标记：

<div id="search-blk">
    <label for="obj">One</label><!-- Comment out this whitespace
    --><select name="obj" id="obj" class="fieldmax">
        <option value="">All</option>
        <option value="1">One</option>
    </select>
</div>

相关CSS ：

#search-blk label {
    display: inline-block;
    width: 10%;
}

input, textarea, select { 
    display: inline-block;
    ...
}

.fieldmax {
    width: 90%;
}

<强>更新：

如果您希望将label固定为以像素为单位的固定宽度（并希望select扩展到剩余宽度），请使用display: table和{{1分别在容器table-cell和元素上。

演示2：http://jsfiddle.net/abhitalks/ybx6z/8/

相关CSS ：

div

演示3：http://jsfiddle.net/abhitalks/ybx6z/9/

这里有两个#search-blk { display: table; } #search-blk label { display: table-cell; width: 64px; } .fieldmax { display: table-cell; width: 100%; }和一个label。根据内容，第一个select是自动宽度。第二个label是固定宽度。 label灵活，宽度为100％（剩余可用）。

希望有所帮助。

内联块中输入字段的全宽

1 个答案: