Как управлять позиционированием набора полей с помощью css? - PullRequest
Новая
       10

Как управлять позиционированием набора полей с помощью css?

2 голосов
/ 29 июля 2009

У меня есть следующий код: 

<fieldset>
    <legend>
        <strong>Personal Information</strong>
    </legend>
    <ul>
        <li>
            <label for="first_name">First Name</label><br />
            <input type="text" id="first_name" name="first_name" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>
<fieldset>
    <legend>
        <strong>Car Information</strong>
    </legend>
    <ul>
        <li>
            <label for="car_make">Make</label><br />
            <input type="text" id="car_make" name="car_make" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>

Прямо сейчас все находится слева, где второй набор полей (информация об автомобиле) находится прямо под первым набором полей (личная информация).

Я бы хотел, чтобы набор полей с информацией об автомобиле находился справа от набора полей с личной информацией, чтобы они были рядом. Используя css, как бы я это сделал?

Ответы [ 5 ]

4 голосов
/ 29 июля 2009

Поскольку поля считаются блоками, вам нужно использовать 

fieldset {
    width: 200px;
    float: left;
}

Или что угодно для ширины набора полей.

2 голосов
/ 03 февраля 2011 
fieldset {
  -moz-border-radius:5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  width: 200px;
  float: left;    
}
2 голосов
/ 29 июля 2009

То, что они сказали, но вы также можете правильно отображать информацию об автомобиле, что дает вам преимущество всегда быть заподлицо с этим краем, независимо от ширины, если это важно.

1 голос
/ 29 июля 2009

Если вы присваиваете ширину своим наборам полей и перемещаете влево, что-то вроде этого:

HTML: 

<fieldset class="myFieldSet">
    <legend>
        <strong>Personal Information</strong>
    </legend>
    <ul>
        <li>
            <label for="first_name">First Name</label><br />
            <input type="text" id="first_name" name="first_name" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>
<fieldset class="myFieldSet">
    <legend>
        <strong>Car Information</strong>
    </legend>
    <ul>
        <li>
            <label for="car_make">Make</label><br />
            <input type="text" id="car_make" name="car_make" value="" maxlength="30" />
        </li>
        ...
    </ul>
</fieldset>

CSS: 

.myFieldSet
{
width:300px;
float:left;
}
1 голос
/ 29 июля 2009

Что вы можете сделать, это переместить оба набора полей влево. CSS будет выглядеть так: 

fieldset {
    float: left;
    width: 200px;
}

Это повлияет на каждый набор полей на странице, поэтому, если вы хотите изолировать только определенные наборы полей, используйте классы css : 

<style>
    .FloatLeft { float: left; width: 200px;}
</style>

<fieldset class="FloatLeft">
...