CSS делает ширину: стоп на 100% против плавающих объектов

Попробуйте следующее:

<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 находятся в первой строке, текст ввода занимает всю вторую строку, а "Отправить" и "Ссылка" находится на третьей строке.

Я хочу, чтобы все они были на одной строке, и если окно расширено, текст должен расширяться. Как это сделать без таблиц?

Ответ 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>

Ответ 2

Смотрите: http://jsfiddle.net/thirtydot/mSwBe/

Это работает во всех современных браузерах.

Это достаточно близко к IE7 (не поддерживает box-sizing: border-box, но в этом случае это можно легко проделать довольно легко).

box-sizing: border-box заставляет текст input точно вписываться в ширину его содержащего span.

overflow: hidden очень полезен.

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

Ответ 3

Вам нужно поместить все влево и использовать некоторые относительные значения для 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>

Вы можете увидеть здесь

Это БУДЕТ ломаться, когда страница попадает в определенную узость, поэтому вам может потребоваться установить минимальную ширину на вашем теле.

Ответ 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

Лучшим подходом (построением решения от Ctrl3) было бы изолировать ввод текста в своем собственном 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>

Посмотрите на работу