2

我有一个关于 CSS 和 HTML 的问题。

我正在尝试将 DIV 包裹在另一个元素（在这种情况下为 UL）并让它包裹它，同时保持两者居中。作为一个额外的好处，我不能设置一个特定的宽度，因为包装 DIV 内的内容的宽度必须是动态的（因为这基本上是一个模板）。

我试过浮动，就包装而言，它可以工作，但事情最终要么向右或向左。

我对此有点疯狂，谷歌没有帮助！

提前致谢！

更新：

很抱歉不包括代码或图像。这就是我试图用图像说明的事情：

UL宽度的一种状态

宽度的另一种状态

包装 DIV不能拉伸容器的整个宽度。它必须环绕UL。

深灰色是 UL 周围的 DIV。无论内容的宽度如何，我都需要 DIV 包裹 UL（具有水平布局），因为就像我上面所说的，UL 的内容会不时变化。LI 中的文本将发生变化。

我也需要它居中。我已经让它与 float left 和 float right 一起工作，但我需要它居中。

这是我目前用于容器 DIV 以及 UL 和 LI 元素的代码：

#container{
    height: 100px;
    width: 500px;
    font-size: 14px;
    color: #grey;
    display: table-cell;
    vertical-align: middle;
}
#container ul{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}
#container li{
    background: url(checkmark.png) center left no-repeat;
    display: inline;
    padding-left: 20px;
    margin-right: 5px;
}
#container li:last-child{
    margin-right: 0;
}
4

5 回答 5

8

更新

我得到了它。这是你要找的吗？？http://jsfiddle.net/vZNLJ/20/

#wrapper {
    background: #ccc;
    margin: 0 auto; /* to make the div center align to the browser */
    padding: 20px;
    width: 500px; /* set it to anything */
    text-align: center;
}
#wrapper ul {
    background: #aaa;
    padding: 10px;
    display: inline-block;
}
#wrapper ul li {
    color: #fff;
    display: inline-block;
    margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
    color: #fff;
    display: inline-block;
    margin: 0;
}
<div id="wrapper">
    <ul>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
</div>

于 2012-07-24T10:47:36.077 回答
2

这是一个旧帖子，但您现在可以做的是：

<div style="display: flex; justify-content: center;">
    <div style="display: inline-block;">
        <input type="button" value="Example Button" />
    </div>
</div>
于 2019-09-19T08:13:54.850 回答
1

问题不在于将 DIV 包裹在内容周围，而是让内容声明其实际大小，从而将 DIV 边界向外推。在处理这个问题时，有几件事情需要考虑。不仅来自现有的 UL 或 LI 标签，还来自 DIV 中的 DIV。

我使用自定义标签来帮助更清晰地描述布局。自定义标签是 DIV 标签，因此它们的属性必须由 CSS 操作才能获得正确的行为。

<layout-linear horizontal>
    <control-label>Label 1</control-label>
    <control-label>Label 2</control-label>
    <control-label>Label 3</control-label>
    <control-label>Label 4</control-label>
    <control-label>Label 5</control-label>
</layout-linear>

这种布局表明内容 .. 控制标签标签 .. 将显示在水平行中。要让 layout-linear 标签的边框环绕 control-label 标签的内容，需要做几件事：

layout-linear[horizontal]
{
    display : block;
    box-sizing: border-box;
    border : 1px solid black;
    padding : 1px 1px 1px 1px;
    white-space: nowrap;
    width : 100%;
    clear : both;
    text-align : center;
}

首先，box-sizing 属性必须设置为border-box。这将强制线性布局 (DIV) 标记环绕内容。Padding、Border、Margin 将确保显示一个空的 DIV 标签。显示空 DIV 标签的其他技巧是使用 or :after { content:.; 可见性：隐藏；}。

如果您不希望控制标签标签换行，请添加空格：nowrap。

当我讨论 control-label 标签的 float 属性时，我将讨论 text-align。

下一部分需要内部 DIV 标记（控制标签）正确指定它们的框大小类型和边框。

control-label
{
    display : inline-block;
    /* float : left; */
    box-sizing: border-box;
    border : 1px solid black;
    margin : 5px 5px 5px 5px;
    padding : 5px 5px 5px 5px;
}

Display : inline-block，使控制标签标签从左到右流动。显示：块，将导致标签垂直堆叠。

Float 被特别注释掉以引起您的注意，float 会导致布局线性标签根据边距、填充和边框缩小到其最小的框大小。

要让控制标签从右到左流动，请将 text-align : right 添加到 layout-linear 标记。或者在这种特定情况下，设置 text-align : center。

同样，box-sizing 用于告诉控制标签 (DIV) 标记完全环绕它的内容。不仅是文本，还有由边框、填充和边距设置绘制的框的边缘。

CSS 属性的这种排列是导致外框和内框正确呈现或按预期呈现的原因。

快乐编码。

于 2016-07-28T07:19:52.997 回答
0

您没有提供代码，但请看一下我刚刚设置的这个小提琴，这可能会有所帮助：

http://jsfiddle.net/qXDJr/

如果我误解了你的意思，请告诉我。示例代码将始终有助于将来参考。

于 2012-07-24T10:30:36.883 回答
0

这可能会有所帮助。如果你不能设置宽度，你可以align='center'在div包装中添加ul

<div align="center">
<ul>
    <li>MenuItem</li>
    <li>MenuItem</li>
    <li>MenuItem</li>
</ul>
</div>
于 2012-07-24T11:13:03.553 回答