CSS - Форматирование форм с тегами меток - PullRequest
Новая
       10

CSS - Форматирование форм с тегами меток

0 голосов
/ 21 августа 2009

У меня есть форма, которую я пытаюсь семантически разметить и отформатировать с помощью CSS. Поскольку он создается динамически (из ASP.NET MVC), некоторые элементы могут отображаться в виде текста, а не входных тегов, поскольку они могут быть доступны только для чтения для этого экрана. Я пытаюсь добавить ширину к тегам меток, чтобы выровнять форму и выровнять поля значений / значений, но кажется, что я могу сделать это только, если я их плаваю (это правильно?). Это работает нормально, когда я рендерил значения после тега метки, но если значение пустое, левый с плавающей точкой, кажется, складывается с предыдущей меткой, даже если оба содержатся в тегах p (это должен быть уровень блока, да?) Что, если что, я делаю не так? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /><title>

    Edit

</title>
        <!-- Next Style Section Is Just To Set Up Classes, it will be moved to .CSS file -->
        <style type="text/css">
            div.FieldGroup {background-color: Blue; }
            p.Field { display: block; }
            span.NoteHeader { font-style: italic;}
            label { float: left; width: 150px;} 
        </style>
</head>

<body>
  <div id="main">


    <h2>Edit</h2>



    <form action="" method="post">
        <div id="MainSection" class="FieldGroup">
            <fieldset>
                <legend>Person Identification</legend>
                <p class="Field">
                    <label>Name:</label>
                    Name
                </p>
                <p class="Field">
                    <label for="Colour">ChildStatus:</label>
                    <select id="Colour" name="Colour">
                        <option value="10">Red</option>
                        <option value="20">Yellow</option>
                        <option selected="selected" value="30">Orange</option>
                    </select>
                </p>
                <p class="Field">
                    <label for="Age">Age:</label>
                    <input id="Age" name="Age" type="text" value="" />

                </p>
                <p class="Field">
                    <label>Birthplace:</label>
                </p>
                <p class="Field">
                    <label for="Reference">Reference:</label>
                    <input id="Reference" name="Reference" type="text" value="" />
                </p>
            </fieldset>
        </div>
    </form>
  </div>

</body>
</html>

Приветствия

MH

(P.S. - Я не могу добавить в текстовые поля только для чтения, чтобы они содержали эти пробелы, поскольку они хотят простой текст, если они не могут изменить значение)

Ответы [ 3 ]

1 голос
/ 21 августа 2009

Добавьте clear: оба к вашей декларации p.Field: 

p.Field { 
   display: block; 
   clear: both; 
}
0 голосов
/ 25 августа 2009

Вам не нужно плавать label с, чтобы установить их ширину, вам просто нужно изменить display на block. Однако, если вы перемещаете их, содержащиеся в них блоки p не будут расширяться, чтобы окружать их, если только не дано overflow из hidden или auto. Очистка label также может помешать их укладке, но все зависит от того, как вы хотите.

0 голосов
/ 21 августа 2009

Добавить свойство clear: left к css метки.

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

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

...