Question

任务：使文本框100％宽度，但为按钮留出足够的空间。

问题：按钮出现在下一行，文本框超出了容器的宽度。

<div class="field">
    <input type="text" name="my-field" />
    <input type="button" id="my-button" value="Add +" />
</div>

 .field {
     margin-right: -70px;
     width: 100%;
 }
 .field input[type=text] {
     display: block;
     float: left;
     margin-right: 70px;
 }
 .field input[type=button] {
     display: block;
     float: right;
 }

我的主要布局使用以下技巧来实现具有固定侧边栏的灵活宽度，但由于某种原因，这不适用于上述。

<div class="outer-wrap">
    <div class="content">
        ...
    </div>
    <div class="sidebar">
        ...
    </div>
 </div>

 .outer-wrap {
     margin-right: -300px;
     width: 100%;
 }
 .content {
     float: left;
     margin-right: 300px;
 }
 .sidebar {
     float: right;
 }

我在这里犯了什么错误？

Answer 1

你必须使用HTML，但是否则这在IE7 +和所有现代浏览器中都能完美运行。

请参阅： http://jsfiddle.net/thirtydot/25bZC/

<强> CSS：

.field > span {
    display: block;
    overflow: hidden;
    padding-right: 10px
}
.field input[type=text] {
    width: 100%
}
.field input[type=button] {
    float: right
}

<强> HTML：

<div class="field">
    <input type="button" id="my-button" value="Add +" />
    <span><input type="text" name="my-field" /></span>
</div>

Answer 2

要取消此功能，您必须确保右侧浮动的元素位于左侧浮动的元素之前。喜欢这个

<div class="field">
    <input type="button" id="my-button" value="Add +" />
    <input type="text" name="my-field" />
</div>

Answer 3

尝试给出固定宽度

field input[type=text]

和

.field input[type=button]

水平CSS - 输入字段100％和按钮的保证金

3 个答案: