Question

这是我目前的代码。我希望它生成一个导航栏，其左侧的相同行（它的位置）旁边有图像和文本，并且同一行中的所有菜单项= class =“top_info”除外向右拉了一下。有人能帮助我吗？

<!DOCTYPE html>
<html>
    <head>

    <style>
    body {background: ; margin: ; }
    #container {width: ; margin:; background: #333300 ;   }
    #header {color: white;}
    #logo { font-size: 18pt;}
    #logo img {float: left ;}
    #logo span {color:orange; }



    .top_info {float:left;  color:white;}

        </style>
        </head>
        <body>

        <div id="container">

            <!--header-->   
            <div id="header">

                <div id="logo"><img src="http://www.townplanning.com.au/app/theme/default/design/images/header/logo.png"><span>TOWNPLANNING</span>.COM.AU</p></div>

                <div class="top_info">CONTACT US</div>
                <div class="top_info">BLOG</div>
                <div class="top_info">NEWS</div>
                <div class="top_info">PREVIOUS VCAT DECISIONS</div>
                <div class="top_info">PLANNING SCHEMES</div>
                <div class="top_info">WHAT IS TOWN PLANNING?</div>
                <div class="top_info">MAP</div>
                <div class="top_info">ABOUT</div>
                <div class="top_info">HOME</div>

        </div> <!--div header end-->

    </div> <!--DIV CONTAINTER end-->

Answer 1

假设徽标和文字应位于第一行和菜单中应该在第二行，我编辑了代码。

请参阅小提琴： DEMO

<强> HTML ：

<div id="container">

            <!--header-->   
            <div id="header">

                <div id="logo"><img src="http://www.townplanning.com.au/app/theme/default/design/images/header/logo.png"/><span>TOWNPLANNING</span>.COM.AU</div>
<ul class="top_info">
                <li >CONTACT US</li>
                <li >BLOG</li>
                <li >NEWS</li>
                <li >PREVIOUS VCAT DECISIONS</li>
                <li >PLANNING SCHEMES</li>
                <li >WHAT IS TOWN PLANNING?</li>
                <li >MAP</li>
                <li >ABOUT</li>
                <li >HOME</li>
                </ul>
        </div> <!--div header end-->

    </div> <!--DIV CONTAINTER end-->

<强> CSS ：

#container { margin:0; background: #333300 ;overflow:auto;   }
#header {color: white;}
#logo { font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
ul{padding:0;}
.top_info li{  color:white;}
ul li{display:inline-block;list-style:none;}

使用ul li创建菜单始终是最佳做法。和造型他们到display:inline-block，这将使他们出现在单身线。
我已将该类应用于ul标记，重复多次在div中并不是一个好习惯。

2.假设徽标和菜单应该在同一行，请看小提琴： DEMO

<强> CSS：

#container { margin:0; background: #333300 ; overflow:auto;  }
 #header {color: white;}
#logo { float:left;font-size: 18pt;}
#logo img {float: left ;}
#logo span {color:orange; }
.top_info li{  color:white;}
ul li{display:inline-block;list-style:none;}

导航栏对齐

1 个答案: