Try this:

<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>

This ends up with LEFT and RIGHT being on the first line, the text input taking up the whole of the second line, and "Submit" and "Link" being on a third line.

I want all of these to be on one line , and if the window is widened, the text input should widen. How do I do this without tables?

---

It can't be done without setting exact widths.

Set exact width to left and right columns, also margin to center div. Here is my solution

JsFiddle

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

Code

<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>​

---

See: http://jsfiddle.net/thirtydot/mSwBe/

This works in all modern browsers.

It's close enough on IE7 (no support for box-sizing: border-box , but this can be worked around easily enough, in this instance).

box-sizing: border-box makes the text input fit exactly inside the width of its containing span .

overflow: hidden is being 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;
}

---

You need to float everything to the left, and use some relative values on the div's.

<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>​

You can see here

This WILL break when the page gets to a certain narrowness, so you might have to set a min-width on your body.

链接地址: http://www.djcxy.com/p/89164.html

上一篇: 具有“自动”高度的100％宽度背景图像

下一篇: CSS使宽度：100％停止浮动对象