Question

我已经制作了一个列表，其中文本被包含在一个圆圈内。问题是圆圈水平相互碰撞，我想在它们之间留出一些空间。我已经尝试过填充填充和边距，但没有运气。

＆＃13;

.oval {
  width: 120px;
  height: 100px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}

＆＃13;

<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>

＆＃13;

Answer 1

Flexbox解决方案......

＆＃13;

ul {
  display: flex;
  /* change this value as you need */
  width: 500px; 
  justify-content: space-between;
}

.oval {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 100px;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}

＆＃13;

<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>

＆＃13;

Answer 2

只需将display设置为inline-block然后您就可以使用边距

＆＃13;

.oval {
  width: 120px;
  height: 100px;
  display: inline-block;
  margin-right: 50px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
}

＆＃13;

<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>

＆＃13;

更准确地说，不是为所有margin-right元素添加.oval规则，而是将其添加到除最后一个之外的所有元素：

.oval:not(:last-child) {
  margin-right: 50px;
}

Answer 3

将显示更改为inline-block是正确的，但为了保持“项目n”垂直居中，请添加：

line-hight: 100px;

给你的CSS。如果您计划在每个圆圈（多行）中添加更多文本，则必须添加内部元素以保持文本居中。

.oval {
  width: 120px;
  height: 100px;
  display:inline-block;
  margin-left: 50px;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: gray;
  color: white;
  border: 2px solid white;
  font-weight: bold;
  
}

<ul>
  <li class="oval">item1</li>
  <li class="oval">item2</li>
  <li class="oval">item3</li>
</ul>

Answer 4

将显示设置为内嵌块为.oval

在形状中包含的列表项之间添加水平空格

4 个答案: