html - 点不会内联并且列表不会居中

Question

我正在尝试在此页面上的 css 中创建看起来像 HR 的创意事件:http://www.wix.com/website-template/view/html/689?utm_content=ma_html_fwt_temp_1_4creaeven&utm_medium=template_banner&utm_campaign=ma_fwt&utm_source=freewebsitetemplates&experiment_id=ma_html_fwt_temp_1_4creaeven&utm_term=services

但是，我得到的结果看起来有点不对劲:(

有人能帮忙吗？

到目前为止，这是我的代码:

<ul id="hr">
    <li id="dot"></li>
    <li class="random_thing">....................<bold>CLIFFEDGE</bold> STUDIOS....................</li>
    <li id="dot"></li>
</ul>

#hr {
list-style-type: none;
float: left;
}

#hr li {
display: inline-block;
}

#dot {
border-radius: 15px;
background-color: black;
height: 15px;
width: 15px;
}

http://jsfiddle.net/2VkNk/

谢谢!

Answer 1

在此示例中，您可能需要注意几件事。

首先:您不能在页面上重复使用相同的ID，因此我将引用切换到了类。

其次:在水平对齐元素时有几种不同的选择。在您使用 display: inline-block 的实例中，您可以简单地设置 vertical-align: middle。 Here's some good reading on the subject .

第三:实际上更多的是最后的评论/旁白:您链接到的示例实际上似乎在使用背景图像，因此对您尝试使用更合适的开发方法来说是公平的!

可以看到my updated Fiddle here .

代码是:

<ul id="hr">
    <li class="dot"></li>
    <li class="random_thing">....................<bold>CLIFFEDGE</bold> STUDIOS....................</li>
    <li class="dot"></li>
</ul>

#hr {
    list-style-type: none;
    float: left;
}

#hr li {
    display: inline-block;
}

.dot {
    border-radius: 15px;
    background-color: black;
    height: 15px;
    width: 15px;
    vertical-align: middle;
}