gpt4 book ai didi

html - 对齐列表编号

转载 作者:搜寻专家 更新时间:2023-10-31 22:28:49 28 4
gpt4 key购买 nike

我有以下 HTML。在这里,我试图将列表中的数字对齐,使其向右对齐,但在我的输出中,它们是左对齐的(通过一些论坛,我了解到列表 nukbers 默认情况下是左对齐的)

<!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。

谢谢

最佳答案

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

这应该可以解决它

关于html - 对齐列表编号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25929561/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com