Question

disagree/agree

在示例图片中，完全不同意和完全同意的词语集中在一起。为了达到这个目的，我是否必须制作4个不同的div和0的余量？或者我可以在1 div中完成吗？

#answersTop {
 float: right;
 clear: both;
 width: 400px;
 height: 40px;
 margin: 50px 0 20px 0;
 background-color: #3d569d;
}
#answersTop li {
 float: left;
 color: #ffffff;
 font-weight: bold;
 margin-top: 5px;
}

.aFirst {
 margin-left: 10px;
}

.aMiddle {
 margin-left: 20px;
}

.aLast {
 margin-left: 20px;
     margin-right: 10px;
}


<div id="answersTop">
        <ul>
            <li class="aFirst">Totally disagree</li>
            <li class="aMiddle">Disagree</li>
            <li class="aMiddle">Agree</li>
            <li class="aLast">Totally agree</li>
        </ul>

    </div>

Answer 1

与give

中的text-align:center; li tag一样

<强> demo

CSS

   li{
    display:inline-block;
      padding:20px 20px;
    background-color:red;
    vertical-align:top;
    text-align:center;

}

=============================================== ============================

<强> demo1

<强> CSS

#answersTop {
 float: right;
 clear: both;
 width: 400px;

 margin: 50px 0 20px 0;
 background-color: #3d569d;
}
#answersTop ul{
    margin:0;
    padding:0;
}
#answersTop li {
 float: left;
 color: #ffffff;
 font-weight: bold;
 margin-top: 5px;
    list-style-type:none;
    vertical-align:middle;
    text-align:center;
}
#answersTop li span{
    display:block;
}
.aFirst {
 margin-left: 10px;
}

.aMiddle {
 margin-left: 20px;
}

.aLast {
 margin-left: 20px;
     margin-right: 10px;
}

Answer 2

您可以使用li将text-align: center; - 元素置于中心位置。

Answer 3

不要text-align。请改用li标签的display属性。请参阅演示http://jsfiddle.net/DWFLA/

Answer 4

这是一个带有一些CSS的ul li结构的例子：

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul li {
                display: inline;
                text-align: center;
                margin: 0 5px;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>Totally disagree</li>
            <li>Disagree</li>
            <li>Agree</li>
            <li>Totally agree</li>
        </ul>
    </body>

</html>

li元素中的中心文本

4 个答案: