无法浮动：在水平ul上左移

debugcn 发表于 Dev

像素喵

我刚刚完成了CSS3课程，我想使用从我的网站中学到的知识。我想在页面顶部放置一个水平条，在页面的中心放置两个图像和它们之间的一些文本。问题是我似乎无法float:left在<li>元素上工作。

我将使用相同的技术在该栏下方放置一个菜单。这仅仅是本页面的开始，甚至可能不是最好的设计，我只是想一次一次在现实世界中使用在课堂上学到的东西。

我试图避免在HTML代码中的任何地方都使用类，这在维护和更改方面很麻烦。

这是HTML：

<div>
    <ul id="topBar" class="clearfix">
        <li><img src="../../images/heinleinmedalgold-glow150.jpg" /></li>
        <li id="logo">pixelmeow's pages</li>
        <li><img src="../../images/heart_grenade.jpg" /></li>
    </ul>
</div>

这是CSS：

@import url(reset.css);
.clearfix:before, .clearfix:after {
    content:" ";
    display:table;
}
.clearfix:after {
    clear:both;
}
body {
    width:100%;
}
#topBar {
    width:100%;
    height:10em;
    background-color:black;
}
#topBar ul {
    margin:0 auto;
}
#topBar ul li {
    float:left;
    list-style:none;
    border:2px solid red;
    height:5em;
    display:inline-block;
}
#topBar ul li:first-child {
    text-align:right;
}
#topBar ul li:nth-of-type(2) {
    min-width:40%;
    padding-top:5em;
    text-align:center;
}
#topBar ul li:last-child {
    text-align:left
}
#logo {
    font-family:kells_uncialbold;
    color:gray;
    top: 50px;

}

j08691

您的选择器不正确。#topBar ul li应该是#topBar li。您尝试选择一个<ul>ID为的元素的后代topBar，而实际上是ID为的元素。因此，您可以使用#topBar li或ul#topBar li。

@import url(reset.css);
.clearfix:before, .clearfix:after {
    content:" ";
    display:table;
}
.clearfix:after {
    clear:both;
}
body {
    width:100%;
}
#topBar {
    width:100%;
    height:10em;
    background-color:black;
}
#topBar {
    margin:0 auto;
}
#topBar li {
    float:left;
    list-style:none;
    border:2px solid red;
    height:5em;
    display:inline-block;
}
#topBar li:first-child {
    text-align:right;
}
#topBar li:nth-of-type(2) {
    min-width:40%;
    padding-top:5em;
    text-align:center;
}
#topBar li:last-child {
    text-align:left
}
#logo {
    font-family:kells_uncialbold;
    color:gray;
    top: 50px;

}

<div>
    <ul id="topBar" class="clearfix">
        <li><img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" /></li>
        <li id="logo">pixelmeow's pages</li>
        <li><img src="http://pixelmeow.com/images/heart_grenade.jpg" /></li>
    </ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。