两行里的项目。第二行没有边距
Li item on two lines. Second line has no margin
我目前正在处理一个无序列表,其中包含带有标语的列表项。我有一个列表项的问题,它足够长以占用两行(见图)
我想让第二行与第一行对齐。这是我正在使用的 HTML 代码。我将 fontAwesome 用于支票图像。
ul {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
我已经尝试在“2”和 'lines' 之间输入多个
,但这对我来说似乎是一个非常糟糕的做法。我希望有人能帮我解决这个问题。
你可以把你的文字放在 div
里,把 float:left
给你内心的 li
和 div
.
您可以将其添加到您的 ul:
ul {
text-indent:-20px;
margin-left:20px;
}
这是因为刻度线是内联内容,所以当文本换行时,它会像往常一样继续流动。
您可以利用 text-indent
:
来阻止此行为
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
文本缩进 (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
通过提供负数 text-indent
,您可以告诉第一行向左移动所需的量。如果您随后指定一个正数 padding-left
,您可以取消此偏移量。
在下面的示例中,使用了值 1.28571429em
,因为它是由 font-awesome 在 .fa-fw
上设置的 width
。
ul {
width: 300px;
}
li {
padding-left: 1.28571429em;
text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
您可以通过设置 position:absolute
来删除页面流的签出
ul {
width: 300px;
}
.fa-fw {
position: absolute;
left: -22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
您可以使用 "display:table" 作为 li 的样式,并在内部创建具有 "display:table-cell" 样式的跨度。或者创建相应的class。像这样:
<li style="display:table"><span style="display:table-cell">text with
all lines indented</span></li>
ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}
添加填充和文本缩进 - 从 li:before.
移动文本
您可以使用list-style-position:outside。你的 CSS 是这样的:
ul li {
list-style-position:outside;
... whatever else ...
}
或直接内联:
<li style = 'list-style-position:outside'>stuff </li>
ul li {
display: flex;
flex-direction: row;
}
ul li:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f054";
margin-right: 7px;
display: flex;
align-items: flex-start;
margin-top: 2px;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<ul><li>Visit the Museum of Modern Art in Manhattan</li>
<li>Visit to Bali with tripraja</li>
<li>Check out Campbell's Soup Cans by Warhol and The Dance (I) by Matisse</li>
<li>Behold masterpieces by Gauguin, Dali, Picasso, and Pollock</li>
<li>Enjoy free audio guides available in English, French, German, Italian, Spanish, Portuguese.</li></ul>
我目前正在处理一个无序列表,其中包含带有标语的列表项。我有一个列表项的问题,它足够长以占用两行(见图)
我想让第二行与第一行对齐。这是我正在使用的 HTML 代码。我将 fontAwesome 用于支票图像。
ul {
width: 300px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
我已经尝试在“2”和 'lines' 之间输入多个
,但这对我来说似乎是一个非常糟糕的做法。我希望有人能帮我解决这个问题。
你可以把你的文字放在 div
里,把 float:left
给你内心的 li
和 div
.
您可以将其添加到您的 ul:
ul {
text-indent:-20px;
margin-left:20px;
}
这是因为刻度线是内联内容,所以当文本换行时,它会像往常一样继续流动。
您可以利用 text-indent
:
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.
文本缩进 (https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent)
通过提供负数 text-indent
,您可以告诉第一行向左移动所需的量。如果您随后指定一个正数 padding-left
,您可以取消此偏移量。
在下面的示例中,使用了值 1.28571429em
,因为它是由 font-awesome 在 .fa-fw
上设置的 width
。
ul {
width: 300px;
}
li {
padding-left: 1.28571429em;
text-indent: -1.28571429em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
您可以通过设置 position:absolute
ul {
width: 300px;
}
.fa-fw {
position: absolute;
left: -22px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="fa-ul custom-list">
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
<li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>
您可以使用 "display:table" 作为 li 的样式,并在内部创建具有 "display:table-cell" 样式的跨度。或者创建相应的class。像这样:
<li style="display:table"><span style="display:table-cell">text with
all lines indented</span></li>
ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}
添加填充和文本缩进 - 从 li:before.
移动文本您可以使用list-style-position:outside。你的 CSS 是这样的:
ul li {
list-style-position:outside;
... whatever else ...
}
或直接内联:
<li style = 'list-style-position:outside'>stuff </li>
ul li {
display: flex;
flex-direction: row;
}
ul li:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\f054";
margin-right: 7px;
display: flex;
align-items: flex-start;
margin-top: 2px;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<ul><li>Visit the Museum of Modern Art in Manhattan</li>
<li>Visit to Bali with tripraja</li>
<li>Check out Campbell's Soup Cans by Warhol and The Dance (I) by Matisse</li>
<li>Behold masterpieces by Gauguin, Dali, Picasso, and Pollock</li>
<li>Enjoy free audio guides available in English, French, German, Italian, Spanish, Portuguese.</li></ul>