Question

我想在导航栏的左上方有我的徽标（文字标识，没有图片），但是我无法做到..我用浮动尝试了它：左边它已经选择了＃t工作，我不知道为什么。

导航栏和内容的CSS代码：

#top, #middle, bottom {width: 100%; position: relative;}
#top {top: 0; background: #171717;}
#nav {width: 900px; color: #fff; position: relative; margin: 0 auto;}
#nav li {display: inline-block; width: 100px; text-align: center; line-height: 50px;}
#middle {min-height: 100px; height: auto;}
#content {width: 800px; position: relative; margin: 0 auto;}

Answer 1

#nav {
width: 900px;
color: #fff;
position: relative;
margin: 0 auto;
}

删除width:900px;

 #nav {
color: #fff;
position: relative;
margin: 0 auto;
}

Answer 2

我将给你一个基本的想法。更新您的代码，如下所示。

 <div id="top">
        <div style="float:left; width:100px;">Sample</div>
        <div id="nav" style="float:left">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Simplefinite</a></li>
                <li><a href="#">Root</a></li>
            </ul>
        </div>
        <div style="clear:both"></div>
</div>

现在你必须处理徽标上的对齐。

Answer 3

试试这段代码

DEMO

<强> HTML

<body>
        <div id="top">
            <div id="nav">
        <div class="logo">logotext</div>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Simplefinite</a></li>
                    <li><a href="#">Root</a></li>
                </ul>
            </div>
        </div>
        <div id="middle">
            <div id="content">
                <a href="#">Content</a>
            </div>
        </div>
        <div id="bottom">
            <div id="footer">
                <a href="dimasite.tk">dimasite.tk</a> made by C0R3G4M3R.
            </div>
        </div>

</body>

<强> CSS

body, html {
    background: none repeat scroll 0 0 #fff;
    font-family: Tahoma,Arial;
    margin: 0;
    padding: 0;
}
#top, #middle, bottom {
    position: relative;
    width: 100%;
}
#top {
    background: none repeat scroll 0 0 #171717;
    top: 0;
}
.logo {
    position: relative;
  color: #fff;
  width: 150px;
  float:left;
  margin-top:16px;
}
#nav {
    color: #fff;
    margin: 0 auto;
    position: relative;
    width: 900px;
}
#nav li {
    display: inline-block;
    line-height: 50px;
    text-align: center;
    width: 100px;
}
#nav li a {
    color: #fff;
    text-decoration: none;
}
#nav li:hover {
    background: none repeat scroll 0 0 #ff9900;
}
#middle {
    height: auto;
    min-height: 100px;
}
#content {
    margin: 0 auto;
    position: relative;
    width: 800px;
}
#content a {
    color: #000;
    text-decoration: none;
}
#content a:hover {
    color: #ff9900;
}
#bottom {
    background: none repeat scroll 0 0 #ff9900;
    bottom: 0;
    height: auto;
    min-height: 100px;
    top: 5px;
}
#footer {
    color: #fff;
    margin: 0 auto;
    padding: 40px 5px 5px;
    position: relative;
    width: 800px;
}
#footer a {
    color: #fff;
    text-decoration: none;
}
#footer a:hover {
    color: #000;
}

如何在浮动的左上方放置徽标？

3 个答案: