Как я могу установить размер зазора между встроенными элементами в CSS?

Question

Я создаю форму MVC 1.0 для использования в нескольких представлениях. У меня есть некоторые элементы, которые должны отображаться в одной строке, и я сделал это, установив отображение «display: inline» для стиля. Я также добавил настройку margin-left в CSS, чтобы увеличить разрыв между встроенными элементами, но это, похоже, не устанавливается.

Мой CSS имеет:

fieldset label.inline { дисплей: встроенный; поле слева: 2em; }

Код вида:

<fieldset>
    <legend>Details</legend>
    <p>
        <label for="StartTime">Start Time:</label>
        <%= Html.TextBox("StartTime", Model.StartTime.ToShortTimeString())%>
        <label for="NextDay" class="inline">Next Day?</label>
        <%= Html.CheckBox("NextDay") %>
        <%= Html.ValidationMessage("StartTime", "*")%>
    </p>
</fieldset>

Установка размера в стиле «margin-left» не влияет на расстояние между элементом управления StartTime и меткой NextDay. Как я могу создать этот разрыв между элементами?

Answer 1

Использовать дисплей: встроенный блок;

Answer 2

Стиль "margin" работает по-разному для встроенных элементов. Вы можете использовать режим отображения "inline-block":

fieldset label.inline { display: inline-block; margin-left: 2em; }

Answer 3

В каком браузере вы тестируете?

Если вы используете Firefox, используйте расширение Firebug . Используйте инструмент указатель, чтобы выбрать один из ваших элементов, а затем используйте вкладку Layout, чтобы посмотреть на блочную модель. Это покажет вам отступы, границы и поля, которые применяются. Если вы разместите генерируемый HTML-код и рассчитываете свойства блочной модели, вы можете получить лучшие ответы.