0

在某些时候，我的浮动链接列表以缩进结束，导致最后一个链接进入新行（或者div如果我为ul

我真的不知道从哪里开始寻找这个问题。我将继续并链接到该网站。这是该部分的 HTML：

<div id="navigation">
<ul id="navLinks">
    <li><a href="home.html">Home</a></li>


    <li><a href="alston.html">Alston</a></li>


    <li><a href="booking.html">Booking</a></li>

    <li><a href="photos.html" class="lastLink">Photos</a></li>


</ul>
</div>

这是我认为唯一影响它的 CSS：

#navigation {
   position: relative;
   //width: 210px;
   //height: 600px;
   margin: 2px 0;
   font-size: 90%;
   font-weight: normal;
   clear:both;
   overflow:hidden;
}

//NAVIGATION BAR STUFF
#navLinks {
   list-style-type:none;
   //display:inline;
   margin-left:auto;
   margin-right:auto;
   width: 100%;
   padding:0;
   text-align:center;
   text-decoration: none;
   overflow:hidden;
}

ul#booking {
color:rgb(84, 154, 14);
}

ul#navlinks {
   text-algin: center;
   margin: 0;
   padding: 0;
}

ul#navLinks li { display: inline;
list-style-type: none;
   line-height: 150%;
   margin-right: 10px;
   margin-left: 10px;
   background-color: #fff; }

ul#navLinks li a
{
float: left;
text-align:center;
background-color: #ADF16A;
color: #000000;
text-decoration: none;
border-left: 0px;
border-top: 0;
border-bottom: 0;
border-right: 1px;
border-style: solid;
border-color: #7AE015;
width:161px;
padding:3px 0px;
}

ul#navLinks a:hover
{
   background-color: #CC7A00;
}


ul#navLinks .lastLink{
    border:0;
}
//ul#navLinks a 
//END OF NAVIGATION BAR STUFF

整个 CSS 在这里

谢谢！

4

2 回答 2

2

您#navLinks的浏览器默认设置了一些左填充（在我的 cas 中-webkit-padding-start: 40px;）。如果您定义padding-left: 0;，它将被覆盖。

你确实在你的第 195 行覆盖了这个基础style1.css，它有ul#navlinks {但需要ul#navLinks {。

确保在 CSS 文件中对 s 进行拼写检查text-align，并在 CSS 文件中将类和 ID 大写时将它们大写。

于 2012-09-13T15:57:08.013 回答
1

如果您将 css 重置文件添加到您的站点，它应该可以解决您的问题，这与您的 UL 上的填充/边距有关。

一个 css 重置文件，除了许多其他的东西，将所有元素的填充和边距设置为零 - 允许您根据需要自由地设置所有内容的样式。

http://meyerweb.com/eric/tools/css/reset/

于 2012-09-13T16:03:26.460 回答