Question

我刚刚完成了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;

}

Answer 1

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

＆＃13;

@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;

}

＆＃13;

<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>

＆＃13;

Answer 2

值得一提的是，这里的列表可能不是布局的最佳选择。此外，使用浮动时可能无法居中。

JSfiddle Demo

div#topbar {
  text-align: center;
  background-color: black;
  color: white;
}
div#topbar img {
  vertical-align: middle;
}
#logo {
  display: inline-block;
  vertical-align: middle;
}

<div id="topbar">
  <img src="http://pixelmeow.com/images/heinleinmedalgold-glow150.jpg" />
  <h1 id="logo">pixelmeow's pages</h1>

  <img src="http://pixelmeow.com/images/heart_grenade.jpg" />
</div>

无法浮动：左侧工作水平ul

2 个答案: