Как я могу сделать разрыв между двумя элементами, содержащимися в span, используя css?

Question

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

<form action="http://localhost:2689/" method="post">
    <span>
        <label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
        <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
        <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
        <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton"><span><em>Advanced</em></span></a>
    </span>        
</form>

Содержание формы должно быть отцентрировано по ширине (в данном случае 100%).
Якорь должен находиться прямо под кнопкой.

Поскольку картинка может сказать тысячу слов, вот результат моих потрясающих навыков рисования:

_{(источник: telenet.be )}

И весь этот блок должен быть центрирован на веб-странице.

- EDIT -
Поскольку содержимое всех элементов управления может сильно различаться по длине, я не могу дать ни одному элементу никаких спецификаций ширины (даже в%). Кроме того, переоценка ширины оставила бы запутанные пробелы между элементами. Это тоже нежелательный эффект.

Answer 1

Почему бы просто не поставить разрыв перед тегом (
), а затем выровнять его вправо?

Answer 2

Попробуйте установить 'display: block' для каждого элемента, который вы хотите, в отдельной строке. Вам также может понадобиться поиграть с полями и отступами, чтобы расположить их по центру (например, margin-left: 50%; padding-left: - [1/2 ширина элемента]) и выравнивание текста: center.

Answer 3

Как бы мне не хотелось это говорить, это тот случай, когда можно рассмотреть использование таблиц. Но я бы попробовал позиционировать - я сделал быстрое и грязное решение здесь в JSbin

По сути, вы помещаете свою форму в элемент, центрируете ее text-align и делаете контейнер position: relative. Затем вы используете идентификатор в ссылке, чтобы разместить его абсолютно по отношению к родителю. Но это работает, только если родительский элемент является встроенным элементом.

Answer 4

Я бы заменил <span> на <fieldset> для семантической корректности (я не думаю, что span приносит много в таблицу с точки зрения функциональности), и применил бы некоторый стиль к этому fieldset к мелодии из

fieldset {
    text-align: center;
    width: 100%;
    position: relative;
}

Я не могу точно сказать, правильно ли выстроятся ли якорь и кнопка или нет, но так как fieldset имеет position: relative, вы сможете расположить вещи, если вам нужно с относительная легкость.

Answer 5

Если вы не измените его свойство отображения (и не должны этого делать), элемент span должен быть встроенным элементом, то есть он существует в потоке текста. Поместить элементы уровня блока внутри встроенного элемента не очень хорошая идея.

У вас также есть много посторонних тегов. Вместо этого:

<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
    <span><em>Search</em></span>
</button>

почему бы просто не сделать это:

<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
    Search
</button>

span ничего не делает, а em можно эмулировать с помощью CSS:

.fancySubmitButton { font-style: italic }`

Вот что я бы сделал:

<form>
    <label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
    <input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />             
    <button id="powerSearchSubmitButton"  class="fancySubmitButton" type="submit">Search</button>
    <a href="Search.mvc/EmptyAdvancedSearch" id="advancedSearchLinkButton"  class="fancyLinkButton">Advanced</a>
</form>

с использованием CSS:

form {
    text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
    font-style: italic;
}
.fancyLinkButton {
    display: block;  /* this will put it on its own line */
}

Быстрый ответ на комментарии: предоставление чего-либо классу "fancyLinkButton" не не означает, что оно имеет закругленные углы. В любом случае, если вы хотите поместить закругленные углы на определенные элементы, я бы по-прежнему не использовал постороннюю разметку. Если для какой-либо реализации, которую вы используете, требуется больше элементов-оберток, то они должны быть добавлены через Javascript. Помните, что mozilla и webkit уже поддерживают закругленные углы CSS - в конце концов IE тоже будет, и вы сможете легко изменить свою единственную функцию javascript вместо того, чтобы переходить через HTML, чтобы найти везде, где есть ненужные промежутки.

Answer 6

Я обычно плаваю элементы формы (слева), и если я хочу поместить следующий элемент в новую строку, я использую clear: left.