Отображение HTML-элементов управления по горизонтали - PullRequest
Новая
       6

Отображение HTML-элементов управления по горизонтали

1 голос
/ 29 августа 2011

Я хочу расположить свои элементы управления следующим образом

enter image description here

и как-то до сих пор мне это не удавалось .. Вот что я пробовал до сих пор: 

   <div style="">
    <label style="float: left">
        Products:</label>
    <ol style="list-style: decimal">
        <li id="product" style="margin-left: 10px">
            <select style="float: left; width: 100px;">
                <option>Product A</option>
                <option>Product B</option>
                <option>Product C</option>
            </select>
            <input type="text" value="40" style="width: 20px; float: left;" />
            <a style="float: left;">Delete</a> </li>
        <li id="product" style="margin-left: 10px">
            <select style="float: left; width: 100px;">
                <option>Product A</option>
                <option>Product B</option>
                <option>Product C</option>
            </select>
            <input type="text" value="40" style="width: 20px; float: left;" />
            <a style="float: left;">Delete</a> </li>
    </ol>
</div>

Можете ли вы помочь?Благодарю.

Демо

Ответы [ 2 ]

2 голосов
/ 29 августа 2011

Разбейте это изображение по столбцам, вы увидите, что содержимое выровнено по столбцам. Создайте столбцы, используйте DIV, содержащие все / обе строки, и выровняйте их в одну строку. 

<div class="column labels">
<div class="row">Products:</div>
</div>
<div class="column numbers">
<div class="row">1.</div>
<div class="row">2.</div>
</div>
<div class="column inputs">
<div class="row"><input type="text" /></div>
<div class="row"><input type="text" /></div>
</div>

После этого установите .column с параметром float CSS и фиксированной шириной для каждого из .labels, .number, .inputs и так далее ...

0 голосов
/ 29 августа 2011

ты не очистил свои поплавки. В этом случае лучше всего добавить стили «clear: both» ко всем элементам <li>, а также к элементу <ol> http://jsfiddle.net/eJvQa/4/

.
...