无法分隔 LI 元素答案

【问题标题】：Unable to space LI elements无法分隔 LI 元素
【发布时间】：2014-05-19 11:29:14
【问题描述】：

无法在 CSS 中的任何 UL/LI/ 或 A 标签上使用填充、边距或行距。

请记住，在加载所有其他样式表之前，我已经设置了 CSS 重置样式表。这是我的 HTML：

<div class="h_logo"><img src="http://dummyimage.com/800x125/000/fff"></div>
<div class="h_navbar">
                        <nav>
                                <ul>
                                    <a href="#"><li>Home</li></a>
                                    <a href="#"><li>Web Design</li></a>
                                    <a href="#"><li>Advertising</li></a>
                                    <a href="#"><li>Publishing</li></a>
                                </ul>
                        </nav>
</div>

CSS：

.h_logo{
width:800px;
height:125px;
margin:auto;
display:block;
clear:both;
}
.h_nabar{
width:1000px;
height:125px;
padding:10px;
}
.h_navbar li{
list-style-type:none;
display:table-cell;
vertical-align:middle;
width:100px;
height:50px;
text-align:center;

}
.h_navbar ul{
display:table;
margin:auto;
}
.h_navbar a{
text-decoration:none;
display:table-cell;
border:2px double black;
font-size:18px;
}

JSFiddle

【问题讨论】：

您不能将<li> 元素包装在<a> 中。
本站会通知您html和css中的错误：validator.w3.org
好的，这样就解决了问题。但是，如果我为 LI 元素添加宽度以使其更大，则它与其他选项卡的间距不均匀。就像有些人彼此之间的空间比彼此更大。 jsfiddle.net/NcgA3/2
@user3582182 它没有不均匀的空格，你只是把border放在错误的元素中，你应该把你的border从li从a切换到li
trouble styling li and span - margin / padding / positioning的可能重复

标签： html css

【解决方案1】：

CSS

.h_logo{
    width:800px;
    height:125px;
    margin:auto;
    display:block;
    clear:both;
}
.h_nabar{
    width:1000px;
    height:125px;
    padding:10px;
}

.h_navbar li{
    list-style-type:none;
    display:inline-block;
    vertical-align:middle;
    width:120px;
    height:50px;
    text-align:center;
    border:1px solid #111;
}
.h_navbar ul{
    display:block;
    margin:auto;
}
.h_navbar a{
    text-decoration:none;
    display:table-cell;
    font-size:18px;
    vertical-align:middle;
    margin:15px;/*Adjust your margin here*/
    width:120px;
    height:50px;
}

HTML

首页
网页设计
广告
发布

【讨论】：