Question

以下代码将显示3个内联块元素，这些元素集中居中。我希望将这些元素显示在彼此之上，单独居中。

HTML：

<form>
    <fieldset>
        <legend>A box</legend>
        <input type="Submit" name="Submit" value="Submit">
    </fieldset>

    <fieldset>
        <legend>B box</legend>
        <input type="Submit" name="NoOptions" value="No Options">
    </fieldset>

    <span>(Footnote)</span>
</form>

CSS：

fieldset { display:inline-block; }
form { text-align:center; }

我很确定（并非完全）内联块确实是我想要的;我希望字段集尽可能小（如块），但我希望它们是文本对齐的（仅适用于内联的东西）。是否有任何好方法可以叠加它们？

注意：这些字段集可能包含块级元素。

Answer 1

实际上，水平流动（如文字）是inline-block的一个显着特征。如果您希望将您的字段集绞盘到其内容大小，但是垂直堆叠，那么清除和浮动的组合可能会起作用吗？

fieldset {
    /* remove the display: inline-block; property */
    clear: left;
    float: left;
}

<强>更新

在我的脑海中，我不相信可以将元素的大小调整为内容，垂直堆叠，和使用纯CSS水平居中。要做到这一点，你必须回过头来在每个字段集之间插入断点：

<form>
    <fieldset>
        <legend>A box</legend>
        <input type="Submit" name="Submit" value="Submit">
    </fieldset>

    <br>

    <fieldset>
        <legend>B box</legend>
        <input type="Submit" name="NoOptions" value="No Options">
    </fieldset>

    <br>

    <span>(Footnote)</span>
</form>

这与您已经使用的CSS结合使用，可以产生您正在寻找的效果。

Answer 2

据我所知，无法调整内容大小，水平居中并仅使用CSS垂直堆叠。我只想在每个元素周围包裹一个div;

<form>
    <div>
        <fieldset>
            <legend>A box</legend>
            <input type="Submit" name="Submit" value="Submit">
        </fieldset>
    </div>

    <div>
        <fieldset>
            <legend>B box</legend>
            <input type="Submit" name="NoOptions" value="No Options">
        </fieldset>
    </div>

    <div>
        <span>(Footnote)</span>
    </div>
</form>

CSS：

fieldset { display:inline-block; }
form > div { text-align:center; }

Answer 3

您可以将它们包装在<ul>

中

<ul>
<li>
<fieldset>
        <legend>A box</legend>
        <input type="Submit" name="Submit" value="Submit">
    </fieldset>
</li>
<li>

    <fieldset>
        <legend>B box</legend>
        <input type="Submit" name="NoOptions" value="No Options">
    </fieldset>
</li>
</ul>

然后您需要格式化UL：

ul {
   padding:0;
   margin:0;
}

ul li {
   list-style:none;
   text-align:center;
}

Answer 4

你不需要内联块，将它们并排放置，你说你希望它们在彼此之上显示..这意味着你希望它们本身就是一个块元素，他们已经

了

删除它：

fieldset { display:inline-block; }

有帮助吗？

你不需要列表..不是所有需要的列表;）

但我希望它们是文本对齐的

用什么？如果你想要一个字段集的内容，即输入是垂直对齐的，那么它们已经是内联元素，所以应该用vertical-align属性做你想做的事情

如何在彼此顶部垂直显示内联块？

4 个答案: