在一条线上居中一个圆圈

Question

我想将一个圆圈放在一条线上，如下所示：

我有以下代码：

.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}

.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;

.left {
width:200px;
height:100%;
position:relative;
}

<div class="Box">
    <div class="Left">
       <div class="circle">

       </div>
    </div>
    <div class="Right"></div>
</div>

然而，当我调整窗口大小时，它最终会像这样：

即使我调整窗口大小，如何确保圆圈保持原位？

Answer 1

您可以采用不同的方法，并使用&mut List<T> div上的MobileServiceTableQuery<TodoItem> query = todoTable .Select(todoItem => todoItem.Text); List<string> items = await query.ToListAsync(); 属性来表示border-right后面的垂直线：

.left

.circle

Answer 2

另一种简单的方法是使用这样的伪元素：

.box {
  margin: 10px auto;
  max-width: 400px;
  border: 1px solid #000;
  text-align: center;
  position: relative;
}

.box:before {
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: #000;
}

.cirle {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #000;
  margin: 20px 0;
}

<div class="box">
  <div class="cirle"></div>
</div>

这部分代码将确保该行保持在中心位置：

.box:before {
  left: 50%;
  margin-left: -0.5px;
}