无序列表项目的文本对齐

关注

发信

关注(28)粉丝(399)

无序列表项目的文本对齐

本文介绍了无序列表项目的文本对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道是否有任何方法可以使无序列表项目的文本显示为标准光盘/点列表项目图标旁边的列？制作了一对截图：

在列表项（li）中使用带有一些文本的标准无序列表时，它的外观如下所示：

这就是我想要的样子：

这可能没有任何图像/ div黑客？ ;-)我搜索了一下，看看是否有任何标准的CSS设置，但我似乎无法找到任何。

非常感谢！ b
$ b >解决方案

您可以简单地将其编码为：

HTML
$ b

 < ul> 
< li> Hello&Hello; Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello< / li> 
< li> Hello< / li> 
< li> Hello< / li> 
< li> Hello< / li> 
< li> Hello< / li> 
< li> Hello< / li> 
< li> Hello< / li> 
< / ul>

CSS

  ul {
 margin：0; 
 padding：0 20px; 
} 
 ul li {
 padding：0; 
 width：150px; 
背景：红色; 
 margin：10px 0; 
}

I'm wondering if there's any way to make the text of an unordered list item appear as a "column" by the side of the standard disc/dot list item icon? Made a pair of screenshots:

This is how it looks when using a standard unordered list with some text inside the list item (li):

And this is how I want it to look:

Is this possible without any image/div hacks? ;-) I've searched around to see if there's any standard CSS setting for it, but I couldn't seem to find any.

Thanks a lot in advance!

All the best,

解决方案

You can simply code it like this:

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
}
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}

这篇关于无序列表项目的文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-31 02:43