两个并行的无序列表：HTML / CSS

Question

我想要这样。

为实现这一目标，我做了以下工作，但它没有工作：

<div class="col-lg-3">
    <ul>
        <li>java</li>
        <li>android</li>
        <li>python</li>
        <li>HTML/CSS</li>
        <li>Git</li>
    </ul>
</div>

<div class="col-lg-3">
    <ul>
        <li>-----------</li>
        <li>-----------</li>
        <li>--</li>
        <li>---------------</li>
        <li>----</li>
    </ul>
</div>

如何实现java旁边的第一个栏，android旁边的第二个栏等等？

提前致谢！

Answer 1

当你展示这些价值观的进展（或者至少在某种程度上将技能等同于它们）时，一个pregress元素是合适的，它不会要求所有定位css在其他答案中

<ul>
    <li>java     <progress max="100" value="80"></progress></li>
    <li>android  <progress max="100" value="50"></progress></li>
    <li>python   <progress max="100" value="40"></progress></li>
    <li>HTML/CSS <progress max="100" value="20"></progress></li>
    <li>Git      <progress max="100" value="90"></progress></li>
</ul>

然后在你的CSS中有这样的东西 （根据您的设计改变等）

li{
    width:280px
}

progress{
    float:right;
    border:none;
}

这是一个jsfiddle to demonstrate。 （显然它需要更多造型Re：颜色和宽度等适合你的实现，但你明白了）

Answer 2

将css添加为float：left，并显示：block。

http://codepen.io/vaibhavsah/pen/eNKRqG

.col-lg-3{
  float:left;
  display:block;
}

<div class="col-lg-3">
    <ul>
        <li>java</li>
        <li>android</li>
        <li>python</li>
        <li>HTML/CSS</li>
        <li>Git</li>
    </ul>
</div>

<div class="col-lg-3">
    <ul>
        <li>-----------</li>
        <li>-----------</li>
        <li>--</li>
        <li>---------------</li>
        <li>----</li>
    </ul>
</div>