Выровненная по центру форма с метками равной ширины - PullRequest
Новая
       16

Выровненная по центру форма с метками равной ширины

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

У меня есть очень простая веб-форма, которая состоит из меток и полей ввода, однако я не могу найти способ выравнивания формы в центре страницы и чтобы метки имели одинаковую ширину, чтобы они отображались аккуратно рядом друг с другом, один под другим. Структура моей страницы в основном: 

<body>
<div class="form">
<form method="post">
<fieldset>
<label>Mobile:</label><input type="text" name="msisdn"><br/>
<label>Code:</label><input type="text" name="code"><br/>
<br/>
<input type="image" src="submit-button.gif" alt="Submit">
<br/>
<input type="checkbox" name="ts_and_cs"><label> Accept Terms and Conditions</label>
<br/><br/>
</fieldset>
</form>
</div>
</body>

Обычно я исправляю это, выполняя float:left для полей меток и устанавливая ширину для меток, однако для этого мне нужно, чтобы метки и поля ввода были центрированы на странице. Также я не могу установить ширину страницы (или любую другую, содержащую div), поскольку страница будет отображаться на мобильных устройствах с экранами разных размеров.

Есть предложения, как лучше всего оформить форму? Спасибо

Ответы [ 4 ]

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

Попробуйте этот CSS: 

.form { margin: 0 auto; }
.form label { display: inline-block; width: 150px; } /* Replace the width here with what you want */
1 голос
/ 16 апреля 2010

Вы можете центрировать окружающие <div class="form"> и использовать float:left с шириной для меток. Они плавают влево по центру div.

Может быть, вам нужно добавить <div> s вокруг комбинаций метка / ввод, чтобы держать их в одной строке.

PS Я не знаю, связано ли это с примером, но с тегом <label> вы можете указать атрибут for, чтобы метки принадлежали полям ввода и делали их кликабельными , См. здесь для получения дополнительной информации.

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

Почти так же, как и другие, хотя я бы использовал относительную ширину, добавляя один элемент input, чтобы он не уменьшался и оставлял пропуски односторонними. 

<head>
    <title></title>
    <style type='text/css'>
    .container
    {
        margin: 0 auto;
    }
    .container label
    {
        /* tweak to taste */
        float: left;
        width: 35%;
    }
    .container input
    {
        /* tweak to taste */
        width: 63%;
    }
    </style>
</head>
<body>
    <div class="form">
        <form method="post">
        <fieldset>
            <div class="container">
                <label>Mobile:</label>
                <input type="text" name="msisdn" />
            </div>
            <div class="container">
                <label>Code:</label>
                <input type="text" name="code" />
            </div>
            <div></div>
            <br />
            <input type="image" src="submit-button.gif" alt="Submit" />
            <br />
            <input type="checkbox" name="ts_and_cs" />
            <label>Accept Terms and Conditions</label>
            <br />
            <br />
        </fieldset>
        </form>
    </div>
</body>
0 голосов
/ 16 апреля 2010

Рекомендуется установить атрибуты полей для метки и входных тегов, но вы можете заключить каждую строку в элемент div.

например,

<div style="margin: 0 auto;"> <label>Mobile:</label><input type="text" name="msisdn"> </div>

Настройка для поля 0 авто по существу центрирует его на странице

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...