Question

我正在尝试在此页面的css中创建CREATIVE EVENTS 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

第三：真的更像是最终评论/旁边：您链接到的示例实际上似乎正在使用背景图片，以便您尝试使用更合适的开发方法！ / p>

您可以看到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;
}

Answer 2

我改变了你的例子：适合我：

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

<style type="text/css">
#hr {
list-style-type: none;
float: left;
font-size: 18px;
}
#hr li {
display: inline-block;
vertical-align: top;
}

#smalldots {
height: 10px;
margin-top: -5px;
}

#dot {
border-radius: 15px;
background-color: black;
height: 15px;
width: 15px;
margin-top: 2px;
}
</style>

点不会内联，列表不会居中

2 个答案: