时间戳

首页 > 解决方案 > 如何在 css/html 中实现这种风格？

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

问题描述

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

图片

图标带有圆形圆圈（完成）的地方，图标。但我的问题来自文本。在下图中，我猜我们将它与文本左对齐，但一切都完美契合，每个文本之间的空格，对齐。

但是当我尝试做同样的事情时，它看起来是这样的：

img2

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

正如你们所看到的，文本不断断线，并且不像原始图像那样居中。

继承人的代码：

.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;
}
<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>

谢谢，对不起我的英语不好。

标签： htmlcss

解决方案

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 */
}
<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>

推荐阅读