Question

这是我的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屏幕上的短导航栏以使其在较小的屏幕上工作？

Answer 1

你可以使用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上让它包裹起来。

页面导航不会停留在一条线上

1 个答案: