Question

我有以下HTML。在这里，我正在尝试将列表中的数字对齐，但是在我的输出中，截至目前，它们是左对齐的（通过一些论坛我知道列表nukbers默认情况下是左对齐的）< / p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<ul class="itemizedlist">
<li class="item">
<div class="para"><span class=item-num>(i)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(ii)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(iii)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(iv)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(v)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(vi)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(vii)</span> Item desc</div>
</li>
<li class="item">
<div class="para"><span class=item-num>(viii)</span> Item desc</div>
</li>
</ul>
</body>
</html>

在当前输出中我得到以下结果。

(i) Item desc
(ii) Item desc
(iii) Item desc
(iv) Item desc
(v) Item desc
(vi) Item desc
(vii) Item desc
(viii) Item desc

但我想要输出如下。

   (i) Item desc
  (ii) Item desc
 (iii) Item desc
  (iv) Item desc
   (v) Item desc
  (vi) Item desc
 (vii) Item desc
(viii) Item desc

请让我知道如何完成这项工作。

这里是fiddle，我也附加了我的CSS。

由于

Answer 1

你可以尝试

.item {
 float:right;
}

Answer 2

.item-num{
   display:inline-block;
   width:30px; /* make it whatever u want */
   text-align:right;
}

这应该解决它

Answer 3

我认为这就是你想要的：检查下面的小提琴

JSFiddle

CSS：

  ul.itemizedlist {
       list-style-type: none;
       margin-left: 0.1em;
    }

    ul.itemizedlist li.item {
       list-style: none;
    }
   .item{

       width:100px; 
       text-align:right;
    }

    .itemizedlist li.item div.para span.item-num {
        margin-left: -0.5em;

    text-indent: 0em;
      margin-right: 0em;
    }

对齐列表号码

3 个答案:

JSFiddle