4

好的..所以我在问题列表中检查了（尽我所能），但没有发现任何类似的东西..如果那里有答案，抱歉添加重复...

我正在使用最新版本的 Foundation 4 框架。

我在很多地方都有子弹（主要是UL）。但是，当我使用text-align: center带有项目符号列表的任何文本时，普通文本和列表文本居中对齐，但项目符号本身（方形、圆盘等）不是。

现在奇怪的部分......这个问题只发生在 Chrome 和 IE9/IE10 中。它在 Firefox / Safari 上按预期工作。我也尝试过使用.text-center基本上做同样事情的类（foundation.css 的一部分），即text-align: center.

这是测试链接http://www.crevolve.com/testing/ ....

非常感谢任何帮助...谢谢...

4

2 回答 2

6

我在很多地方都有子弹（主要是UL）。但是，当我对带有项目符号列表的任何文本使用 text-align: center 时，普通文本和列表文本是居中对齐的，但项目符号本身（方形、圆盘等）不是。

您需要设置 的list-style-position，ul默认情况下其值为outside。这意味着项目符号将在内容流之外（在此处阅读更多信息）。

要解决您的问题，您可以这样做：

ul.square {
    list-style-position: inside;
    list-style-type: square;          
    text-align:center;
}

但是坚持下去并不能完全解决你的问题，我认为，因为如果你的文本长度不同，ul那么一切都会集中。这意味着它们不会对齐并且看起来不会很好。看看这个小提琴的第一张幻灯片，看看我的意思。

要使其居中并使其看起来不错，您可以执行以下操作：

.container {
    float:right;
    position:relative;
    right:50%;
    background-color:lightgreen;
}
.inner-container {
    float:left;
    position:relative;
    left:50%;
    background-color:lightyellow;
}
ul.square {  
    list-style-type: square;              
    width:300px;
}

<div> /* the wrapper div */
    <div class="container"> /* outer container to offset by 50% */
        <div class="inner-container"> /* inner container to make it center */
            <ul class="square">
                <li>First Item</li>
                <li>Second Item, this is a longer text</li>
            </ul>
        </div>
    </div>
</div>

工作示例位于采样 jsfiddle 的幻灯片 2 上。我添加了背景颜色，以便您更好地了解它是如何工作的。

于 2013-04-08T02:16:54.940 回答
0

如果您想保留 list-style-position: 的显示，同时能够在 Chrome 上居中显示项目符号并列出内容：

ul {
    list-style-position: inside;
}
ul {
    padding-left: 11px;
    text-indent: -11px;
}
li {
    margin-left: -11px;
}

缺点：11px 是项目符号开头和 li 文本开头之间的空间宽度。这是一个丑陋的幻数，可能因浏览器而异。不幸的是，我还没有找到任何合理化的方法......

于 2014-09-05T10:36:04.073 回答