如何在中心徽標的兩側提供導航選項？

我想創建一個頂部標題，中間有徽標，左側和右側有導航選項。如何在中心徽標的兩側提供導航選項？

以下是我迄今爲止的內容，但不知道如何將其帶到那裏。我該怎麼做才能做到這一點？

<div class="header"> 
    <div class="nav"> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 4</li> 
    <img class="logo_home" src="logo.png" height="100"> 
      <li>Option 5</li> 
      <li>Option 6</li> 
      <li>Option 7</li> 
      <li>Option 8</li> 
     </ul> 
    </div> 
</div>

CSS：

ul { 
list-style:none; 
} 
li { 
display:inline; 
} 
.header { 
background-color: #999; 
width: 100%; 
height: 80px; 
top: 0; 
left: 0; 
position:absolute; 
} 
.logo_home { 
display:block; 
margin-left:auto; 
margin-right:auto; 
}

來源

2013-04-06 AAA

只是糾正你的東西是不是你所要求的真正相關的，但我看到一個錯誤。 'li'元素沒有'href'屬性。 – trajce 2013-04-06 19:35:52

@trajce對不起！我以前有一個標籤，但我刪除了它，但我想不知何故我仍然有href部分。 – AAA 2013-04-06 19:38:11

檢查我的答案，菜單居中。 – trajce 2013-04-06 19:53:29

這裏是一個fiddle什麼，我認爲你正在努力實現。更改li inline to float，現在ul需要根據您的需要進行修改，因此它可以居中。

這裏是另一個fiddle我認爲這正是你想要實現的。您只需要將display:block刪除到圖像並將text-align:center添加到ul。這樣的元素是在中心。

因此，這裏的HTML

<div class="header"> 
    <div class="nav"> 
     <ul> 
      <li href="#">Option 1</li> 
      <li href="#">Option 2</li> 
      <li href="#">Option 3</li> 
      <li href="#">Option 4</li> 
      <li><img class="logo_home" src="logo.png" height="100" /></li> 
      <li href="#">Option 5</li> 
      <li href="#">Option 6</li> 
      <li href="#">Option 7</li> 
      <li href="#">Option 8</li> 
     </ul> 
    </div> 
</div>

，這裏是你的CSS

ul { 
list-style:none; 
    text-align:center;/* this will center your items*/ 
} 
li { 
    margin: 0 5px; 
    display:inline; 
} 
.header { 
background-color: #999; 
width: 100%; 
height: 80px; 
} 
.logo_home { 
margin-left:auto; 
margin-right:auto; 
/*removed display:block*/ 
}

來源

2013-04-06 19:38:18 trajce

謝謝@trajce！這將工作，但菜單選項顯示在標題下。我需要他們與徽標一起展示。 – AAA 2013-04-06 19:56:20

我改變display: inline從li到float: left並在li標籤包裹img。看起來它是你在找什麼：FIDDLE

來源

2013-04-06 19:41:01

謝謝Artyom。但它似乎標誌不集中，所以不知道這是否適用於我。 – AAA 2013-04-06 19:51:24

我想這是你想要什麼：

http://jsfiddle.net/VWcVw/

一切設置爲display: inline，並把圖像中的<li>標籤。

編輯：這是一個更好的版本，與標誌兩側的鏈接水平堆疊。 http://jsfiddle.net/VWcVw/1/

來源

2013-04-06 19:41:42 uncleshelby

謝謝@uncleshelby。徽標不居中，菜單選項沒有水平對齊。 – AAA 2013-04-06 19:53:44

我更新了它，如果我理解正確，它應該會更好。 – uncleshelby 2013-04-06 20:14:13

這是要走得更遠。我會將左右分爲兩個班級，也可以放置鏈接。

.logo_home img{ 
margin:0 auto; 
} 
.navleft { 
    float: left; 
    width: 500px; 
    height: 90px; 
    margin: 0 auto; 
    padding: 0; 
    } 
.navleft li { 
    float: left; 
    padding: 5px 5px 5px 5px; 
} 
.navright { 
    float: right; 
    width: 500px; 
    height: 90px; 
    margin: 0 auto; 
    padding: 0; 
    } 
    .navright li { 
    float: left; 
    padding: 5px 5px 5px 5px; 
} 
</style> 
</head> 
<body> 
<div class="header"> 
     <ul> 
      <div class="navleft"> 
      <li><a href="#">Option 1</li> 
      <li><a href="#">Option 2</li> 
      <li><a href="#">Option 3</li> 
      <li><a href="#">Option 4</li> 
    </div>  
    <img class="logo_home" src="logo.png" height="100"> 
    <div class="navright"> 
      <li><a href="#">Option 5</li> 
      <li><a href="#">Option 6</li> 
      <li><a href="#">Option 7</li> 
      <li><a href="#">Option 8</li> 
     </ul> 
    </div> 
</div>

來源

2013-04-06 19:41:52

像這樣的事情會做它 -

.left-li { 
    float:left; 
} 
img { 
    float:left; 
} 
.right-li { 
    float:left; 
}

這裏的HTML

<div class="header"> 
<div class="nav"> 
    <ul class="left-li"> 
     <li href="#">Option 1</li> 
     <li href="#">Option 2</li> 
     <li href="#">Option 3</li> 
     <li href="#">Option 4</li> 
    </ul> 
<img class="logo_home" src="logo.png" height="100"> 
    <ul class="right-li"> 
     <li href="#">Option 5</li> 
     <li href="#">Option 6</li> 
     <li href="#">Option 7</li> 
     <li href="#">Option 8</li> 
    </ul> 
</div>

來源

2013-04-06 19:42:08 Vector

如何在中心徽標的兩側提供導航選項？

回答

相關問題