-1

我想设置该字段的字段集的宽度，然后让包装器和输入框流动以占用可用空间。

这就是我在这里得到一些帮助的程度：

.lft { float: left; }
ul, li { list-style-type: none; vertical-align:middle; }
.ts3 { font-size: 15px; }
.dc3 { background-color: #808080; }
.tc5 { color: #333333; }
.p4 { padding: 4px; }
.r2 { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; }
.r6 { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.field { line-height:27px; font-family:arial, sans-serif; border-color: #d9d9d9; border-top:solid 1px #c0c0c0; }
input.field{width:100%}
.fieldwrapper{display:inline-block; width:100%}
label{width:300px; display:inline-block; }
<ul>
    <li>
<div class="r6 dc3 ts2 p4">
<label field_id="None" for="sender">Sender email address</label>
<div class="fieldwrapper">
<input class="field" placeholder="Email" type="text" value="">
</div>
</div>
</li></ul>

当我将包装器设置为 100% 时，它会一直延伸，而不是一直延伸到减去fieldset的宽度。

这是我试图为流体宽度网站实现的目标： 字段集

输入框填满可用空间？

4

3 回答 3

1

添加

input.field{width:100%}
.fieldwrapper{display:inline-block; width:70%}
label{width:25%; display:inline-block; }​

您可以调整标签的宽度并相应地输入。

演示http://jsfiddle.net/cskQ8/38/

新更新

input.field{width:100%}
.fieldwrapper{ padding: 0 5px 0 0;
    overflow: hidden;}
label{width:200px; display:inline-block; float:left}​

在此处查看更新的演示

于 2012-10-09T11:13:30.110 回答
1

Yup, of course it does you've floated the button right taking it out of the document flow. You'll have to set right padding on the container for the input (not the fieldwrapper) to make up for the elements to the right of it.

 .containingDiv{padding-right:75px;}
 .fieldwrapper{width:100%;}
于 2012-10-09T11:16:46.120 回答
0

如果您现在以更语义化的方式构建您的 CSS 和标记，将来您将非常感激。定义列表是一个合适的起点：

<dl class="form-container clearfix">
  <dt><label for="sender">Sender email address</label></dt>
  <dd><input placeholder="Email" type="text" value="" /></dd>
</dl>

和 CSS（记得包含一个 clearfix）：

.form-container { /*just whatever styles you had applied*/}

/*label container, fixed width*/
.form-container>dt {float:left; width:150px;}

/*input container, defaults to width:auto*/
.form-container>dd { margin-left:150px; }

/*box-sizing property is the best thing since sliced bread*/
.form-container input[type=text] {width:100%;box-sizing:border-box;padding:4px;}

​摆弄 ，尝试调整结果框架的大小，看看它有多流畅！

于 2012-10-09T11:46:35.413 回答