如何使用css在span包含的两个元素之间休息？

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）}

整个街区应该以网页为中心。

- 编辑 -
因为所有控件的内容长度都很大，所以我不能给任何元素任何宽度规格（甚至不是％）。此外，过度估计宽度会在元素之间留下令人困惑的空白区域。这也不是一个理想的效果。

Answer 1

尝试在单独的一行上为每个元素设置'display：block'。您可能还需要使用边距和填充来使它们居中（如margin-left：50％; padding-left： - [1/2 width of element]）和text-align：center。

Answer 2

为什么不在标签之前暂停（
）然后将其对齐？

Answer 3

我通常浮动表单元素（左），如果我想将下一个元素放在新行上，我使用clear：left。

Answer 4

我将<span>替换为<fieldset>用于语义正确性（我不认为span在功能方面给表带来了很多），并将一些样式应用于fieldset 1}}到了

的曲调

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

我无法确定这是否会正确排列锚点和按钮，但由于fieldset设置了position: relative，您将能够定位内容你需要相对轻松。

Answer 5

尽管我不愿意这么说，但这是一种可以考虑使用表格的情况。 但我会尝试定位 - 我做了一个快速＆amp;脏的解决方案 at JSbin

基本上，您将表单放入元素中，以text-align为中心，并创建容器position: relative。然后使用链接中的id来绝对定位它以引用父项。但它只有在父元素是内联元素时才有效。

Answer 6

除非您更改其显示属性（并且不应该），否则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 */
}

快速回复评论：给“fancyLinkBut​​ton”类提供的东西暗示它有圆角。无论如何，如果你想在某些元素上放置圆角，我仍然会避免使用无关的标记。如果您正在使用的任何实现需要更多的包装元素，那么应该通过Javascript添加这些元素。请记住，mozilla和webkit已经支持CSS圆角 - 最终IE也会支持，并且您将能够轻松更改单个javascript函数，而不是通过HTML浏览以找到不需要的跨度的所有位置。