Question

你好，我需要一个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; }

但是这不显示圆圈。

怎么了？

由于

Answer 1

您可以将:before伪元素用于圆圈，使用Flexbox进行垂直对齐。

＆＃13;

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

＆＃13;

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

＆＃13;

您也可以将文字放在span中，然后将其添加到margin-left。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用简单的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; }

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我的建议是在你的div中放置一个与圆圈一样的跨度

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

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

Css圆和文本内联

4 个答案: