Question

请检查以下代码段。

当链接位于多行上时，我希望第一行下方所有行中的文本与第一行的开头（左侧位置）对齐。图标仍应与第一行垂直对齐（如现在）。

换句话说，在下面的示例中，单词“ 更长 ”应在单词“ 此 < / strong>”。

我尝试使用填充和文本缩进没有成功。有人有解决方案吗？

dates = df2['time_1'].dt.normalize() df2['time_1'] += np.where(dates == df2['date'], 0, df2['date'] - dates) df2['day'] = df2['time_1'].dt.day df2['val'] = df2['val'].astype(int) print (df2) date time_1 val day 0 2173-04-03 2173-04-03 12:35:00 5 3 1 2173-04-03 2173-04-03 12:50:00 5 3 2 2173-04-03 2173-04-03 12:59:00 5 3 3 2173-04-04 2173-04-04 13:14:00 5 4 4 2173-04-04 2173-04-04 13:37:00 1 4 5 2173-04-05 2173-04-05 13:37:00 1 5 6 2173-04-06 2173-04-06 13:39:00 6 6 7 2173-04-06 2173-04-06 11:30:00 5 6 8 2173-04-08 2173-04-08 16:00:00 5 8 9 2173-04-09 2173-04-09 22:00:00 8 9 10 2173-04-10 2173-04-10 22:00:00 8 10 11 2173-04-11 2173-04-11 04:00:00 3 11 12 2173-04-12 2173-04-12 04:00:00 3 12 13 2173-04-13 2173-04-13 04:30:00 4 13 14 2173-04-14 2173-04-14 08:00:00 6 14

.column { width: 150px; background-color: lightgrey; padding: 10px; } ul { list-style: none; padding-left: 0; }

Answer 1

在CSS中添加此代码。

.column li {
    position: relative;
    padding-left: 25px;
}
li span {
    position: absolute;
    left: 0;
    top: 0;
}

.column {
  width: 150px;
  background-color: lightgrey;
  padding: 10px;
}

ul {
  list-style: none;
  padding-left: 0;
}

.column li {
  position: relative;
  padding-left: 25px;
}

li span {
  position: absolute;
  left: 0;
  top: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
  <ul>
    <li><span class="fa fa-fw fa-tree"></span> <a href="#">Hello</a></li>
    <li><span class="fa fa-fw fa-car"></span> <a href="#">This is a much longer link</a></li>
    <li><span class="fa fa-fw fa-book"></span> <a href="#">Hello again</a></li>
  </ul>
</div>

Answer 2

只需将display:flex添加到您的li中，如果您希望文本距离图标更远，然后也使用边距，它将起作用。希望这就是您想要的。

.column {
  width: 150px;
  background-color: lightgrey;
  padding: 10px;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  display: flex;
}

a {
  margin-left: 10px;
}

.n {
  width: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
  <ul>
    <li>
      <div class="n"><span class="fa fa-fw fa-tree"></span></div> <a href="#">Hello</a></li>
    <li>
      <div class="n"><span class="fa fa-fw fa-car"></span></div> <a href="#">This is a much longer link</a></li>
    <li>
      <div class="n"><span class="fa fa-fw fa-book"></span></div> <a href="#">Hello again</a></li>
  </ul>
</div>

如果我们不增加图标的宽度并且有弹性

.column {
  width: 150px;
  background-color: lightgrey;
  padding: 10px;
}

ul {
  list-style: none;
  padding-left: 0;
}
li
{
display:flex;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="column">
  <ul>
    <li><span class="fa fa-fw fa-tree" style="background-color:blue;"></span> <a href="#">Hello</a></li>
    <li><span class="fa fa-fw fa-car" style="background-color:blue;"></span> <a href="#">This is a much longer link</a></li>
    <li><span class="fa fa-fw fa-book" style="background-color:blue;"></span> <a href="#">Hello again</a></li>
  </ul>
</div>

Answer 3

或者，您也可以在display: grid;标签上使用li布局。

.column {
  width: 150px;
  background-color: lightgrey;
  padding: 10px;
}

ul {
  list-style: none;
  padding-left: 0;
}

.column li {
  display: grid;
  grid-template-columns: auto 1fr;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="column">
  <ul>
    <li><span class="fa fa-fw fa-tree"></span> <a href="#">Hello</a></li>
    <li><span class="fa fa-fw fa-car"></span> <a href="#">This is a much longer link</a></li>
    <li><span class="fa fa-fw fa-book"></span> <a href="#">Hello again</a></li>
  </ul>
</div>

将第二行链接与第一行的开头对齐

3 个答案: