頁面導航不會停留在一行

這裏是我的html：頁面導航不會停留在一行

<div id="leftmenu"> 
    <ul> 
     <li class="border"><a href="index.html">Home</a></li> 
     <li class="border"><a href="services.html">Services</a></li> 
     <li class="border"><a href="ourwork.html">Our Work</a></li> 
     <li class="border"><a href="testimonials.html">Testimonials</a></li> 
     <li class="border"><a href="clients.html">Clients</a></li> 
     <li class="border"><a href="quote.html">Get a Quote</a></li> 
     <li class="border"><a href="documents.html">Documents &amp; Forms</a></li> 
     <li class="border"><a href="charities.html">Charity Information</a></li> 
     <li class="border"><a href="jobs.html">Need a Job or Gig?</a></li> 
     <li class="border"><a href="casting.html">Casting Calls</a></li> 
     <li><a href="ourteam.html">Our Team</a></li> 
    </ul> 
</div>

這裏是我的CSS：

#leftmenu { 
    position:relative; 
    min-width:100%; 
    background-color:white; 
    border-top:1px solid gray; 
} 

#leftmenu ul li{ 
    float:left; 
    padding:7px; 
    font-family:Georgia; 
    font-size:small; 
    -webkit-box-shadow:inset 0px 0px 20px rgba(0,0,0,0.1); 
    -webkit-box-shadow:0px 0px 5px rgba(0,0,0,0.4); 
}

我所希望做的是有導航欄調整大小以適應它所在的父元素。我也希望它根據屏幕大小調整大小。我已經在我的戴爾15英寸筆記本電腦屏幕上測試了這一點，然後在我的Mac 26英寸屏幕上對其進行了測試，並且導航欄不會一直延伸到Mac屏幕上居中的div的末端，但會在戴爾屏幕上顯示。如果我在Mac屏幕上擴展它，它會在較小的Dell屏幕上溢出。我只需要處理Mac屏幕上的短導航欄，以使其在小屏幕上工作？

來源

2011-02-09 Tabetha Moe

我通常做的是讓LIs顯示：inline;並使UL文本對齊：中心;並在必要時進行包裝。讓我想出一個想法，然後我會發布一些想法。 – mark123 2011-02-09 18:55:39

您可以使用display：table;等等，以使其適合您需要它適合的方式。我還將邊界開關移到了最後一個列表項，以便您不必使用這麼多的類。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Untitled Page</title> 
    <meta charset="UTF-8" /> 
    <style type="text/css"> 
     #leftmenu { display: table; width: 100%; } 
     ul { display: table-row; } 
     li { border-right: solid 1px #f08; display: table-cell; height: 3em; } 
     li.noBorder { border: none; } 
    </style> 
</head> 
<body> 
    <div id="leftmenu"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="services.html">Services</a></li> 
      <li><a href="ourwork.html">Our Work</a></li> 
      <li><a href="testimonials.html">Testimonials</a></li> 
      <li><a href="clients.html">Clients</a></li> 
      <li><a href="quote.html">Get a Quote</a></li> 
      <li><a href="documents.html">Documents &amp; Forms</a></li> 
      <li><a href="charities.html">Charity Information</a></li> 
      <li><a href="jobs.html">Need a Job or Gig?</a></li> 
      <li><a href="casting.html">Casting Calls</a></li> 
      <li class="noBorder"><a href="ourteam.html">Our Team</a></li> 
     </ul> 
    </div> 
</body> 
</html>

只要確保有足夠的水平空間放置它，因爲您知道桌子在必要時如何溢出其容器。

或者如上所述使用display：inline;放在LI上並讓它包裹。

來源

2011-02-09 19:05:47 mark123

頁面導航不會停留在一行

回答

相關問題