Question

我目前正在开发一个网站并尝试实现这种风格：

图标带有圆形圆圈（已完成），图标。但我的问题来自于文本。在下面的图片中，我们有文本对齐左边我想但是一切都很完美，每个文本之间的空间，对齐。

但是当我尝试做同样的事情时，它的外观如下：

忽略右侧（我将在准备好时复制粘贴左侧）

正如大家们所看到的那样，文字会打破线条并且不会像原始图像一样居中。

下面是代码：

＆＃13;

.wrapper {
  display: flex;
  text-align: center;
}

.block {
  width: 50%;
}

.lista-fazemos {
  list-style-type: none!important;
  padding: 0;
  margin: 0;
  text-align: right;
}

.circle {
  display: inline-block;
  border-radius: 60px;
  border-color: black;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  font-size: 20px;
  color: #A52222;
  margin-right: 15px;
}

.homem-fazemos {
  float: right;
}

＆＃13;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">

<div class="wrapper">
  <div class="block">
    <ul class="lista-fazemos">
      <li>
        <i class="fas fa-wrench circle"></i>
        <strong>Instalação</strong><br> Fazemos instalação de produtos comprados em nossa loja sem custo adicional!
        <br>
      </li>
      <li>
        <i class="fas fa-truck circle"></i>
        <strong>Instalação</strong><br> Mora longe? Sem problemas, temos serviços de entrega que irão te satisfazer! <br>
      </li>
      <li>
        <i class="fas fa-plus circle"></i>
        <strong>Instalação</strong><br>Aqui somos nota + em qualidade! Pode ficar tranquilo, temos os melhores produtos! <br>
      </li>
    </ul>
  </div>
  <div class="block">
    <ul class="lista-fazemos">
      <li>
        <i class="fas fa-wrench circle"></i> Texto texto Texto texto<br>
      </li>
      <li>
        <i class="fas fa-truck circle"></i> texto texto texto texto <br>
      </li>
      <li>
        <i class="fas fa-plus circle"></i> texto texto texto texot <br>
      </li>
    </ul>
  </div>
</div>

＆＃13;

谢谢，抱歉我的英语不好。

Answer 1

＆＃13;

ul {
  list-style: none
}

li {
  width: 50%;
  float: left;
margin-bottom:2%;
}
.circle {
  display: inline-block;
  border-radius: 60px;
  border-color: black;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;
  font-size: 20px;
  color: #A52222;
  margin-right: 15px;
}

   .col-container {
  display: table;
  /* Make the container element behave like a table */
  width: 100%;
  /* Set full-width to expand the whole page */
}

.col {
  vertical-align: top;
  text-align: top;
  display: table-cell;

  /* Make elements inside the container behave like table cells */
}

＆＃13;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<ul class="col-container">
  <li>
    <div class="col">
      <i class="fas fa-wrench circle"></i>
    </div>
    <div class="col">
    <strong>Instalação</strong><br> Fazemos instalação de produtos comprados em nossa loja sem custo adicional!
    </div>

  </li>
  <li>
    <div class="col">
      <i class="fas fa-truck circle"></i>
    </div>
    <div class="col">
      <strong>Instalação</strong><br> Mora longe? Sem problemas, temos serviços de entrega que irão te satisfazer!
    </div>

  </li>
  <li>
    <div class="col">
      <i class="fas fa-plus circle"></i>
    </div>
    <div class="col">
      <strong>Instalação</strong><br>Aqui somos nota + em qualidade! Pode ficar tranquilo, temos os melhores produtos!
    </div>

  </li>
   
</ul>

＆＃13;

Answer 2

如果要将图标，标题和描述性段落对齐为一致的网格状布局（垂直排列，然后是水平排列），2018年的现代方法是使用 CSS网格。 / p>

工作示例：

body {
font-family: arial, helvetica, sans-serif;
}

.contents {
display: grid;
grid-template-rows: repeat(4, 25%);
grid-template-columns: repeat(2, 80px 220px);
grid-row-gap: 6px;
}

.contents i {
display: block;
width: 60px;
margin: 10px;
line-height: 60px;
font-size: 40px;
text-align: center;
color: rgb(255, 0, 0);
border: 3px solid rgb(255, 0, 0);
border-radius: 50%;
}

.contents div {
width: 208px;
padding: 0 6px;
background-color: rgb(227, 227, 227);
}

h2, p {
max-width: 220px;
}

h2 {
margin-bottom: 2px;
font-size: 12px;
line-height: 12px;
}

p {
margin-top: 0;
font-size: 10px;
}

.heading-2 {
grid-area: 2 / 2 / 3 / 3;
}

.heading-3 {
grid-area: 3 / 2 / 4 / 3;
}

.heading-4 {
grid-area: 4 / 2 / 5 / 3;
}

.heading-5 {
grid-area: 1 / 4 / 2 / 5;
}

.heading-6 {
grid-area: 2 / 4 / 3 / 5;
}

.heading-7 {
grid-area: 3 / 4 / 4 / 5;
}

.heading-8 {
grid-area: 4 / 4 / 5 / 5;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="contents">
<i class="fa fa-wrench"></i>
<div class="heading-1">
<h2>Heading One</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-wrench"></i>
<div class="heading-2">
<h2>Heading Two</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-truck"></i>
<div class="heading-3">
<h2>Heading Three</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-truck"></i>
<div class="heading-4">
<h2>Heading Four</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-5">
<h2>Heading Five</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-6">
<h2>Heading Six</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-7">
<h2>Heading Seven</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

<i class="fa fa-plus"></i>
<div class="heading-8">
<h2>Heading Eight</h2>
<p>Paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</p>
</div>

</div>

Answer 3

很抱歉，如果这有点简单，但你不能只将text-align改为左边吗？

.lista-fazemos{
        list-style-type: none!important;
        padding: 0;
        margin: 0;
        text-align: left;
    }

如何在css / html中实现这种风格？

3 个答案: