模仿segmentfaul问题列表的css问题？

沉迷后端2年，也了解前端框架，现在想写点练手项目，发现主要问题就是布局， bootstrap有时不满足需求还是需要自己写。比如最近想模仿segmentfault，现在问题就是问题列表标签那块是怎么做的?

<div class="container question"> <div class="left"> <div class="leftItem hidden-xs">0投票</div> <div class="leftItem">1回答</div> <div class="leftItem hidden-xs">41<small>浏览</small></div> <div style="clear: both;"></div> </div> <div class="right"> <div class="rightTop"> <ul class="list-inline"> <li>作者</li> <li>7分钟前</li> </ul> </div> <h5 class="title"><a >Java 是一种可，是由 Sun Mic 月推出的 Java 程序设计语言和 Java 平台（即 JavaSE, JavaEE, JavaME）的总称。</a> </h5> <div class="tags"> <ul class="list-inline "> <li> <a href="">java</a> </li> <li> <a href="">js</a> </li> </ul> </div></div> </div> .question { background-color: #C0A16B; }.left { float: left; border: solid red 1px; box-sizing: border-box; line-height: 3; text-align: center; }.leftItem { float: left; margin: 20px 2px 2px 2px; padding: 2px; border: solid green 1px; }.right { margin-left: 5px; overflow: auto; border: solid skyblue 1px; }.rightTop { margin: 5px 0 0 3px; padding: 0px; border: solid palevioletred 1px; }.title { display: inline; }.tags>ul>li>a { background-color: 优艾设计网_设计百科#5CB85C; color: #008000; text-align: center; margin: 2px; float: right; }

效果如下，希望回答。能延伸一些和代码建议更感激，更希望能给一点布局方面的书籍 谢谢。

---

雨言123 2022-06-01 11:36

优艾设计网_设计LOGO

---

jason218 2022-06-01 11:43

优艾设计网_Photoshop百科

前端无秘密，你可用开发者工具直接查看每个标签是怎么定义的结构和样式

---