0

我正在尝试创建一个列表，其中我的项目符号是每个列表项右侧的复选标记。

该列表需要位于页面的中心。

（我会发布一个图形示例，但没有代表点）。

这就是我想要的页面中心。

列出项目 1 ✔
列出项目 2 ✔
列出项目 3 ✔

现在，我的列表位于页面的中心，但复选标记一直位于页面的右侧。

这就是我现在拥有的（并且不想要的）。

列出项目 1 ✔
列出项目 2 ✔
列出项目 3 ✔

      <div class="welcome-text">

          <div class="welcome-text1">
                <ul class="certs">
                    <li>Licensed</li>
                    <li>bonded</li>
                    <li>insured</li>
                </ul>
          </div>

          <div class="welcome-text2">
                The BEST Choice For Quality Termite Pest &amp; Lawn Care! Protecting your home starts with a free inspection.
          </div>

  </div>

这是上面的CSS：

.welcome-text{
    padding-top:30px;
    margin:0 auto;
    width:80%;
    overflow:hidden;

}

.welcome-text1{
    color:#333333;
    font-family:Open Sans Condensed;
    text-transform:uppercase;
    font-size:24px;
    line-height:30px;
}

.welcome-text1 ul{
    list-style-type: none;
    margin-left: 0;
}

.welcome-text ul li{
    display:block;
    background-color:#CCC;
    background: url(images/checkmark.png) right center no-repeat;

}

.welcome-text2{
    color:#777;
    font-family:tahoma;
    font-size:18px;
    line-height:20px;
}


.certs li{
    list-style: none;
    padding:3px;
    margin:0;

}

有任何想法吗？

TIA

4

4 回答 4

1

如果你只需要你的子弹出现在右侧，你可以简单地使用

<ul dir="rtl" type="disc">

然后只需使用 list-style-type 和所有的图像更改项目符号......我认为它会解决你的问题。

于 2013-06-22T18:30:12.563 回答
0

尝试在 ul 上设置宽度。

.welcome-text1 ul{
  width:50%;
}

http://jsfiddle.net/aL3Ap/

于 2013-06-19T18:33:26.837 回答
0

您可以使用伪元素来显示您的标记http://codepen.io/gcyrillus/pen/IJtzi

实际上，如果它是 HTML 格式，只是图像上的一个填充），就是这样

于 2013-06-19T18:44:57.540 回答
0

只要给你的ul标签一个宽度，它就会完成

于 2013-06-21T08:24:20.917 回答