【问题标题】：CSS make a width:100% stop against floating objectsCSS 使宽度：100% 停止对浮动对象
【发布时间】：2012-03-04 22:27:47
【问题描述】：

试试这个：

<div style="float:left"><p>LEFT</p></div>
<div style="float:right"><p>RIGHT</p></div>
<div><p>
    <input type="text" style="width:100%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>

这最终导致 LEFT 和 RIGHT 在第一行，文本输入占据了整个第二行，而“提交”和“链接”在第三行。

我希望所有这些都在一行上，如果窗口变宽，文本输入应该变宽。没有表格我该怎么做？

【问题讨论】：

你需要那个，特定的标记吗？如果您可以将提交和链接移到右列会更容易。
对于 HTML/CSS/JavaScript 问题，jsFiddle 演示或类似内容非常有用，可以包含在您的问题中。
三十点 IE7 不是必需的。 @Yoshi 提交和链接应该附加到输入中，三个加在一起应该占据一行，这是页面上其他任何内容之间的最大空间。
我删除了“是否需要 IE7”评论，因为我的回答大多已经在 IE7 中有效。

标签： html css

【解决方案1】：

如果不设置确切的宽度，则无法完成。

设置左右列的精确宽度，以及中心 div 的边距。这是我的解决方案

JsFiddle

http://jsfiddle.net/xe4EJ/2/

代码

<div style="float:left; width:200px; background-color:red"><p>LEFT</p></div>

<div style="float:right; width:200px; background-color:red"><p>RIGHT</p></div>

<div style="margin:0 210px 0 210px"><p>
    <input type="text" style="width:80%" />
    <input type="submit" />
    <a href="">Link</a>
</p></div>

【讨论】：

这导致“提交”和“链接”被推到一行，所以不好。无论如何，谢谢。
@spraff 只是将文本框的大小减小到 80%。查看更新的答案
不好，涉及幻数的解决方案根本不可接受。无论其他元素的宽度如何，它都必须工作（除非屏幕对所有元素都太窄）。
@spraff 不幸的是，如果不设置确切的宽度，您将无法做到这一点

【解决方案2】：

见：http://jsfiddle.net/thirtydot/mSwBe/

这适用于所有现代浏览器。

在 IE7 上已经足够接近了（no support for box-sizing: border-box，但在这种情况下，这很容易解决）。

box-sizing: border-box 使文本 input 正好适合其包含 span 的宽度。

overflow: hidden 是very useful。

HTML：

<div id="left"><p>LEFT</p></div>
<div id="right"><p>RIGHT</p></div>
<div id="middle">
    <span id="buttonContainer">
        <input type="submit" />
        <a href="">Link</a>
    </span>
    <span id="textContainer">
        <input type="text" />
    </span>
</div>

CSS：

#left, #right, #middle {
    padding: 5px;
}
#left {
    float: left;
    background: #0ff;
}
#right {
    float: right;
    background: #0ff;
}
#middle {
    background: #f0f;
    overflow: hidden;
}

#middle input { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#textContainer {
    overflow: hidden;
    display: block;
}
#textContainer input {
    width: 100%;
}
#buttonContainer {
    float: right;
}

【讨论】：

+1。 overflow: hidden 对我有用。非常感谢！
overflow:hidden 解决了我遇到的类似问题。以前从来不知道这件事。谢谢！
这应该被标记为正确答案

【解决方案3】：

更好的方法（基于 trl13 的解决方案）是将文本输入隔离在其自己的 div 中，并将链接和提交按钮移动到静态右浮动 div 内：

<div style="float:left; width:200px; background-color:red"><p>LEFT</p></div>

<div style="float:right; width:300px; background-color:red">
    <input type="submit" />
    <a href="">Link</a>
   RIGHT</div>

<div style="margin:0 310px 0 210px"><p>
    <input type="text" style="float:left; width:100%; display:run-in;" />

</p></div>

See it in at work

【讨论】：

【解决方案4】：

最好让每个元素都向左浮动，然后你必须给每个元素一个宽度：

<div style="width:100%">
    <div style="float:left;width:10%"><p>LEFT</p></div>
    <div style="float:left;width:80%">
        <p style="clear:both">
            <input type="text" style="float:left;width:79%" />
            <input type="submit" style="float:left;width:10%" />
            <a href="" style="float:left;width:10%">Link</a>
        </p>
    </div>
    <div style="float:left;width:10%"><p>RIGHT</p></div>
</div>

【讨论】：

【解决方案5】：

您需要将所有内容浮动到左侧，并在 div 上使用一些相对值。

<div style="float:left; margin-right: 20px; width: 20%;"><p>LEFT</p></div>
<div style="float:left;  margin-right: 20px; width: 20%;"><p>RIGHT</p></div>
<div style="float:left; margin-right: 20px; width: 50%;"><p>
    <input type="text" style="width:60%; " />
    <input type="submit" style="display:inline; width: 55px;" />
    <a href="">Link</a>
</p></div>

你可以看到here

当页面变窄时，这将中断，因此您可能必须在正文上设置最小宽度。

【讨论】：