-4

（目前还没有答案，请继续回答）

http://gyazo.com/952d354b05e4a4a4cef08e74f8b0253d

http://gyazo.com/e8cc5ae0bcd0464eb074c4674d2896fb

正如你从这些图片中看到的，我已经为我的网站创建了导航栏，但是我的网站太宽了，这意味着你必须滚动才能到达它的末尾，我将如何更改宽度以便它只上升到导航栏结束？

这就是我使用的导航栏的所有 CSS：

   #title {
   position:relative;
   margin:17px 1680px 30px 15px;
       }
       #banner {
   border:1px solid #4A4A4A;
   width:1903;
   height:110;
   background-color:#4A4A4A;
   margin-left:0px;
   position:absolute;
   top:-10px;
   border-radius:15px;
       }
       #navbar {
   position:fixed;
   left:50%;
   margin-top:2px;

       }
       ul {
   list-style-type:none;
   margin:-115px;
       }
       li {    
   display:inline;
   padding:9px;
   border:4px solid;
   font-family:Bebas;
   font-size:25px;
   font-weight:bold;
   color:#FFFFFF;
   border-radius:10px;
   background-color:#000000;
   margin-left:2.5em;
       }

这也是我的 HTML 代码：

    <html>

    <head>
    <link type="text/css" rel="stylesheet" href="todd.css"/>
    <title>Home</title>

    </head>

    <body bgcolor="#ABABAB">
 <div>
   <div id="banner">
     <a href="file:///C:/Users/Todd/Desktop/todd.html"><img         src="file:///C:/Users/Todd/Desktop/Todd.png" id="title"></a>
       <div id="navbar">         
         <ul>
           <a href="file:///C:/Users/Todd/Desktop/todd.html"><li>Home</li></a>                     
           <li>Not Finished</li>                       
           <li>Not Finished</li>                       
           <li>Not Finished</li>          
         <ul>   
       </div>            
     </img>
   </div>
      </div>
      </body>



     </html>
4

2 回答 2

0

如果您使用 min-width 页面的大小应该最小化以适应所有内容。

#banner { 
     min-width: 1903px;
}
于 2013-11-10T14:16:53.560 回答
0

我在这里看到的几件事......

您的导航栏有这一行：

   width:1903;

如果你不希望导航栏太宽，你应该这样缩小。

此外，如果您不想让网站扩展得这么宽，您还可以设置htmlandbody标签的宽度，如下所示：

html, body {width: 1024px}

希望这会有所帮助...

编辑

乍一看，我看到你的边距在这里也设置得很宽：

   margin:17px 1680px 30px 15px;

将 1680 向下缩小将阻止酒吧扩大如此之宽。这似乎是标题栏延伸得如此之宽的主要原因。

于 2013-11-10T14:01:48.707 回答