Question

如何水平堆叠这些列表项元素，并在它们之间使用分隔符？

例如：

<UI Layer> | <Business Layer> | <Services Layer> | <Data Access Layer>

注意：我想使用bootstrap来支持这一点，但这不是必需的。

<div>
    <ul type="square">
        <li>UI Layer</li>
        <ul type="disc">
            <li>WPF</li>
            <li>Windows 8</li>
            <li>Windows Phone 8</li>
            <li>AngularJS</li>
        </ul>
        </li>

        <li>Business Layer</li>
        <ul type="disc">
            <li>Entity Framework</li>
            <li>LINQ</li>
        </ul>
        </li>

        <li>Services Layer</li>
        <ul type="disc">
            <li>WCF</li>
            <li>WebAPI</li>
        </ul>
        </li>

        <li>Data Access Layer</li>
        <ul type="disc">
            <li>SQL Server</li>
            <li>SQLite</li>
        </ul>
        </li>
        <li>Test Automation</li>
        <ul type="disc">
            <li>Unit Test</li>
            <li>Integration Test</li>
            <li>Coded UI</li>
        </ul>
        </li>
    </ul>
</div>

Answer 1

您可以在li元素上使用“display：inline”来强制它们水平显示。就垂直分隔符而言，我建议在相应的li上使用border-right，或者使用垂直管道符号作为内容的after after元素。

li {
  display: inline;
}

li:after {
  width: 10px;
  content: "|";
}

这些方面的东西应该让你开始。在最后一个li：after伪元素上执行“display：none”。

希望这会有所帮助：）

Answer 2

您可以使用伪元素::before或::after并删除第一个或最后一个孩子来实现此目的，

css：

ul li {
    display: inline;
}

ul > li:not(:first-child)::before {
    content: " | ";
}

DEMO：http://jsfiddle.net/z7Btd/1/

Answer 3

您可以使用Bootstrap网格系统（http://getbootstrap.com/css/#grid）来实现水平分离。

通过使用CSS，您可以实现所请求的分离。例如：

<div class="row">
    <div class="right-border col-md-4">
        <p>Bacon ipsum dolor sit amet boudin andouille drumstick.</p>
    </div>
    <div class="right-border col-md-4">
        <p>Brisket short ribs tongue filet mignon, pork capicola chuck.</p>
    </div>
    <div class="col-md-4">
        <p>Meatball tri-tip chicken ham hock short loin turducken spare ribs. </p>
    </div>
</div>

然后，除了Bootstrap CSS之外，您还可以添加以下内容：

.right-border {
   border-right: 5px solid black;
}

使用分隔符水平列出项目元素列表

3 个答案: