Метка CSS, флажки и линейка входных данных - PullRequest
Новая
       2

Метка CSS, флажки и линейка входных данных

1 голос
/ 16 апреля 2011

Какой будет правильный метод css, чтобы сделать следующее, чтобы оно было таким же, за исключением того, что поля ввода текста вертикально выровнены вдоль их левой стороны?

enter image description here

Таким образом, флажки по-прежнему будут прямо напротив полей ввода и между полями метки и ввода, но все поля ввода все еще светятся.

Текущий HTML: 

<p><label for="search_uri">Uri:</label><input id="search_uri" type="text" name="Uri" /></p>
<p><label for="search_server">Server:</label><input type="checkbox" name="server_like" /><input id="search_server" type="text" name="Server" /></p>
<p><label for="search_host">Host:</label><input id="search_host" type="text" name="Host" /></p>

Текущий CSS: 

label {
        font-size: 90%;
        float:left;
        width: 15em;
}

Ответы [ 4 ]

2 голосов
/ 16 апреля 2011

Почему бы просто не использовать отрицательную маржу? 

.checkbox {margin-left: -16px;}

В зависимости от остальной части вашей настройки может потребоваться небольшая настройка для кросс-браузерной идеальности пикселей.

Лично я бы, вероятно, просто разместил и метки, и входные данные и избавился бы от <p>: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        label {
            display: block;
            font-size: 90%;
            width: 15em;
            clear:left;
        }

        label, input {
            float:left;
        }

        input[type=checkbox]
        /* use .checkbox and add 'class="checkbox"' if you want to support IE6*/
        {
            margin-left: -2em;
        }

    </style>
</head>
<body>
    <form>
        <label for="search_uri">Uri:</label>
        <input id="search_uri" type="text" name="Uri" />

        <label for="search_server">Server:</label>
        <input type="checkbox" name="server_like" />
        <input id="search_server" type="text" name="Server" />

        <label for="search_host">Host:</label>
        <input id="search_host" type="text" name="Host" />
    </form>
</body>
</html>
0 голосов
/ 16 апреля 2011

Сделайте это.

Разметка HTML: 

<form><fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input type="text" name="email" maxlength="32" />
<label>Your Password:</label><input type="password" name="password" maxlength="30" />
</fieldset>
<input id="submit" type="submit" value="Create Account" /></form>

Разметка Css: 

fieldset {padding: 10px 0;}
legend {font-weight: bold; padding: 0 0 3px 0; color: #f00;}
input {padding: 2px; border-radius: 3px; width: 130px; float: left; margin: 0 0 5px 0;}
label {float: left; width: 150px; text-align: right; margin: 1px 3px 0 0;}
#submit {width: auto; margin: 0 0 0 153px;}

Затем добавьте ширину к вашей форме, в зависимости от входных размеров,с вашим флажком, просто поместите его между ними и используйте поля.

0 голосов
/ 16 апреля 2011

Если ваша форма маленькая, вы можете просто использовать <table>.

0 голосов
/ 16 апреля 2011

Я бы сделал что-то вроде этого; 

<div class="label">Uri:</div><div class="field"><input type="text" /></div>

Затем присвойте div с классом 'label' ширину по умолчанию и поместите их рядом друг с другом.

EDIT: увидел, что вы измениливаш пост; 

<label for="search_uri">Uri:</label>
<input id="search_uri" type="text" name="Uri" />

Ваш CSS может быть что-то вроде 

label
{
    width: 150px;
    float:left;
    clear:both; /*Clear the previous row with label and field, not sure if this is needed*/
}
input
{
    float:left;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...