Question

我的问题是是否需要flexbox或是否有任何简单的方法可以完成它。自从练习以来已经有很长时间了，所以我什么也不记得了。

.sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
}

<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p>mail@domain.com</p>
    </li>
  </ul>
</div>
</div>

这就是现在的样子

这就是我想要的样子

] 2

Answer 1

因此，我对您的代码做了以下更改：

将背景和尺寸从li元素移至i。
从justify-content: center中删除了li
使用居中的弹性框将图标放在i中。
将padding的默认ul重置为零。

请参阅下面的演示-我想您可以从这里进行介绍：

.sadaka-contacts p {
  color: #115c9b;
  font-size: 14px;
  line-height: 1.42;
}

.sadaka-contacts li {
  list-style: none;
  /*width: 35px;*/
  /*height: 35px;*/
  /*background: #1f76bd;*/
  /*margin-bottom: 5px;*/
  display: flex;
  /*justify-content: center;*/
  align-items: center;
}

.sadaka-contacts li i {
  color: white;
  /* ADDED THE BELOW */
  /* These style were applied to li before */
  width: 35px;
  height: 35px;
  background: #1f76bd;
  margin-bottom: 5px;
  /* Adding a separation margin */
  margin-right: 5px;
  /* Centering the icon */
  display: flex;
  justify-content: center;
  align-items: center;
}

.sadaka-contacts ul {
  padding: 0;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div id="contact-area" class="sadaka-contacts">
  <h3>SADAKA CONTACTS</h3>
  <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>
  <ul>
    <li>
      <i class="fa fa-map-marker"></i>
      <p>135 Hay el nahda, Rabat, Morocco</p>
    </li>
    <li>
      <i class="fa fa-phone"></i>
      <p>00 210 25 55 55 11</p>
    </li>
    <li>
      <i class="fa fa-envelope"></i>
      <p>mail@domain.com</p>
    </li>
  </ul>
</div>
</div>

Answer 2

看看这个：

仅将背景颜色用于图标容器。

 .youclass {
   display: inline;
    width: 35px;
    background: #1f76bd;
    height: 35px;
    margin-right: 10px;
 }
 
 .sadaka-contacts p {
    color: #115c9b;
    font-size: 14px;
    line-height: 1.42;
}

.sadaka-contacts li {
    list-style: none;
    height: 35px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;

}

.sadaka-contacts li i {
    color: white;

}

<div id= "contact-area" class="sadaka-contacts">
        <h3>SADAKA CONTACTS</h3>
        <p>Sadaka ipsum dolor sit amet, consectetur adipiscing elit. Ut at eros rutrum turpis viverra elementum semper quis ex. Donec lorem nulla .</p>

        <ul>
            <li>
                <div class="youclass">
                  <i class="fa fa-map-marker"></i>
                  </div>
                <p>135 Hay el nahda, Rabat, Morocco</p>
            </li>
        </ul>
    </div>
</div>

Answer 3

以下是我生成您想要的UI所采取的步骤：

考虑到所有内容都是弹性的，其中项目在列上对齐。因此，将父类“ sadaka-contacts”的样式设置为

.sadaka-contacts { border: 1px solid black; color: #4040a1; display: flex; height: 240px; flex-direction: column; justify-content: space-between; }
为标题添加底部边框：

.sadaka-contacts h3 { border-bottom: 1px solid blue; }
由于网络浏览器会自动为 p 元素添加16px的边距，因此请删除它并为正文添加其余样式：

.sadaka-contacts p { color: #115c9b; font-size: 14px; line-height: 1.42; margin: 0; }
浏览器还为 ul 元素添加了填充和边距。删除它并添加其余样式为：

.sadaka-contacts ul { margin: 0; list-style: none; padding: 0; }
现在我们来看看您看到的图标和文本重叠部分。为此，我们将 li 元素本身设置为flex，将行作为flex方向（与父级的列方向相反）。请注意，我使用字母代替实际图像。您可以随意替换它。列表项的样式如下：

.sadaka-contacts ul > li { display: flex; flex-direction: row; }
如前所述，我使用的框式字母的样式为：

.sadaka-contacts ul > li > i { border: 1px solid #115c9b; border-radius: 12px; color: white; background: #115c9b; margin: 4px; min-width: 24px; padding: 4px; }
最后，我们使用设置为'center'的'align-self'属性，将列表项文本水平居中对齐。文字样式为：

.sadaka-contacts ul > li > p { align-self: center; }

希望这会有所帮助。

图标旁边的文本未正确对齐

3 个答案: