模仿segmentfaul问题列表的css问题

Question

沉迷后端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;
        }

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

Answer 1

h标签可以设置display:inline–block ，另外这样的布局是可以用bootstrap的，我做过。只是需要你去添加一些代码。

Answer 2

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

Answer 3

你要写成什么样的效果？
个人觉得先通读一下菜鸟教程的css然后多写点，碰到问题，查阅资料就好了。
而且写布局，初学不推荐bootstrap，他这个框架自己写了很多样式，你会不理解他是怎么来的。
关于布局有些布局网页，可以界面化布局

Answer 4

同一楼！！！