html - 带有圆形和矩形的列表

Question

我尝试实现以下从 Word (SmartArt) 中获知的列表。

线条可以是直的。

目前这是我的解决方案:

HTML:

<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Strategischer Verkauf &#x3c;<a href="strategischerVerkauf.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Prozessorientierte Verkaufstechnik &#x3c;<a href="prozessorientierteVerkaufstechnik.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left;"class="circleInhouse"></div>
    <div style="float: left; width: 80%;">
        <p class="boxInhouse">
            Team-Selling &#x3c;<a href="teamSelling.php">Seminarthemen</a>&#x3e;
        </p>
    </div>
</div>
<div style="clear: both;"></div>
<div>
    <div style="float: left; text-align: center; width: 55px;">
        <hr width="2" size="20" class="hrInhouse">
    </div>
</div>
<div style="clear: both;"></div>

CSS:

.box{
    background: #415985;
    color: white;
    padding: 10px; 
    font-size: 12px;   

}

.circle{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    border: 2px solid #415985;
}

.hr{
    padding: 0; 
    margin-bottom: 0; 
    margin-top: -5px;
}

内联 CSS 将外包给 CSS 文件。

但是我并不完全满意，因为线条并不完全适合圆圈，并且必须将框/矩形移动到圆圈“后面”。

如何做到这一点？我正在寻找一个干净的解决方案。

Answer 1

你可以只使用 li 和 pseudo-elements 来做到这一点

ul{
  list-style:none;
  }
li{
  display:block;
  width:200px;
  height:70px;
  padding:20px;
  padding-left:80px;
  font-size:28px;
  color:#fff;
  background:dodgerblue;
  margin:10px 0;
  position:relative;
  }
li:after{
  position:absolute;
  content:"";
  width:100px;
  height:100px;
  background:#fff;
  border:5px solid dodgerblue;
  border-radius:50%;
  top:0px;
  left:-50px;
  }
ul:before{
  content:"";
  position:absolute;
  width:5px;
  height:500px;
  background:#fff;
  border:2px solid dodgerblue;
  }
  

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
 </ul>

这个像你问的那样有更多的曲线

ul{
  list-style:none;
  }
li{
  display:block;
  width:200px;
  height:70px;
  padding:20px;
  padding-left:80px;
  font-size:28px;
  color:#fff;
  background:dodgerblue;
  margin:10px 0;
  position:relative;
  }
li:after{
  position:absolute;
  content:"";
  width:100px;
  height:100px;
  background:#fff;
  border:5px solid dodgerblue;
  border-radius:50%;
  top:0px;
  left:-50px;
  }
ul:before{
  content:"";
  left:-30px;
  position:absolute;
  width:100px;
  border-radius:50%;
  height:550px;
  background:#fff;
  border-right:5px double dodgerblue;
  }

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
 </ul>