Css Circle 和文本内联答案

【问题标题】：Css Circle and text inlineCss Circle 和文本内联
【发布时间】：2017-10-07 22:28:56
【问题描述】：

你好，我需要有一个 CSS 圆圈，右边有一个文本，内联。

我用这个代码

<div class="circlearancione">Disponibile</div>

.circlearancione{
background-color: red;
    border-color: white;
    border-radius: 50%;
    border-width: 5px;
    height: 25px;
    width: 25px;
}

但是使用这个我的文本在圆圈和文本之间没有任何空格。我尝试使用边距和填充，但没有任何改变。

也尝试使用

 <div class="circlearancione"></div><p>Disponibile</p>

.circlearancione, p { display: inline; }

但是这样不显示圆圈。

怎么了？

谢谢

【问题讨论】：

在第一个中，文本在 div 内，因此在圆圈内。在第二个中，给 div 一个宽度和高度，看看会发生什么
我认为您需要将文本包含在 div 或 span 而不是 p 中，然后给它留一个边距。是的，正如 sn3ll 所说，将文本放在圆圈内无济于事。 :P

标签： css alignment shape geometry text-alignment

【解决方案1】：

我的建议是在您的 div 中放置一个类似于圆圈的跨度

<div class="circlearancione"><span></span> Disponibile</div>

这是一个小提琴：https://jsfiddle.net/v5LLp7uf/

【讨论】：

【解决方案2】：

您可以使用:before 伪元素作为圆形，使用Flexbox 进行垂直对齐。

.circlearancione {
  display: flex;
  align-items: center;
}
div:before {
  content: '';
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
}

&lt;div class="circlearancione"&gt;Disponibile&lt;/div&gt;

您也可以将您的文字放入span 并添加一些margin-left。

.circlearancione {
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
  line-height: 25px;
}
span {
  margin-left: 30px;
}

&lt;div class="circlearancione"&gt;&lt;span&gt;Disponibile&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

如果你想避免使用 flex，我可以想象这样的事情。

.circlearancione {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 0;
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
}

<div id="container">
  <p>
    <span class="circlearancione"></span>Disponibile
  </p>
</div>

【讨论】：

【解决方案4】：

您可以使用简单的 flex 来实现它。它促进流畅、响应式、可扩展和可读结构。

HTML

<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile1</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile2</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile3</p>
</div>

CSS

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

p { margin:0; }

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.circlearancione{
  background-color: red;
  border-color: white;
  border-radius: 50%;
  border-width: 5px;
  height: 25px;
  width: 25px;
}

p { margin:0; }

<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile1</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile2</p>
</div>
<div class="container">
  <div class="circlearancione"></div>
  <p>Disponibile3</p>
</div>

【讨论】：