李项目两行。第二行没有保证金

Question

我目前正在处理包含带标语的列表项的无序列表。我有一个关于一个列表项的问题，这个问题足够长，可以占用两行（见图）

我想要它，以便第二行与第一行对齐。这是我正在使用的HTML代码。我使用fontAwesome作为检查图像。

<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”和“行”之间输入多个<form method="POST" action="<?= $_SERVER['PHP_SELF']; ?>"> <!-- Rest of the form --> </form> ，但这对我来说似乎是一个非常糟糕的做法。我希望有人可以帮我解决这个问题。

Answer 1

这是因为tick是内联内容所以当文本换行时它会像往常一样继续流动。

您可以利用text-indent：

来阻止此行为

  

text-indent属性指定在元素的文本内容的第一行开头之前应留多少水平空间。

text-indent（https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent）

通过提供否定text-indent，您可以告诉第一行向左移动所需的数量。如果您指定正padding-left，则可以取消此偏移。

在以下示例中，使用了值1.28571429em，因为它是width上.fa-fw设置的字体很棒。

＆＃13;

＆＃13;

ul {
  width: 300px;
}
li {
    padding-left: 1.28571429em;
    text-indent: -1.28571429em;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以把它添加到你的ul：

ul {
text-indent:-20px; 
margin-left:20px;
}

<强> JSFIDDLE

Answer 3

您可以通过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>

Answer 4

你可以使用“display：table”作为li的样式，并在里面创建一个带有“display：table-cell”样式的span。或者创建相应的类。像这样：

<li style="display:table"><span style="display:table-cell">text with 
all lines indented</span></li>

Answer 5

您可以将文字放在Calendar c = Calendar.getInstance(); int year=c.get(Calendar.YEAR); int month=c.get(Calendar.MONTH); int day=c.get(Calendar.DAY_OF_MONTH); int hour = c.get(Calendar.HOUR_OF_DAY); int minute = c.get(Calendar.MINUTE); int sencond=c.get(Calendar.SECOND); StringBuilder builder = new StringBuilder(); builder.append(year); builder.append(month); builder.append(day); builder.append("_"); builder.append(hour); builder.append(minute); builder.append(sencond); builder.append(".mp4"); String name = builder.toString(); 中，并将div提供给内部float:left和li。

Answer 6

ul li{
padding: 10px 0 10px 20px;
text-indent: -1em;
}

添加填充和文本缩进-将文本从li：before移出。

Answer 7

您可以使用 list-style-position:outside。像这样做你的 CSS：

ul li {
   list-style-position:outside;
     ... whatever else ...
} 

或直接内联：

<li style = 'list-style-position:outside'>stuff </li>