Question

我正在尝试为我的页面创建标签，但我的链接没有水平显示。我使用了float：left，用于使链接水平显示。请让我知道为什么？

    <html>
     <head>
      <title>Test</title>
        <style type="text/css">

            #navbar #holder ul {
               list-style: none;
               margin: 0;
               padding:0;           
                 }

            #navbar #holder ul li a {
            text-decoration:none;
            float: left;
            line-height:20px;
            margin-right:5px;
            font-family:Calibri;
            color:#000;
        }

     </style>
   </head>

  <body bgcolor="SteelBlue">
     <div id="navbar">
        <div id="holder">
            <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">Product</a></li>
               <li><a href="#">Mixers</a></li>
               <li><a href="#">Others</a></li>
           </ul>
        </div>
      </div>

 </body>
 </html>

Answer 1

需要将float left属性应用于Li元素。

在你的代码中，它被应用于里面的元素。

这可以工作，但是如果父元素有任何高度（或者如果overflow:hidden被应用于它），它们将叠加在彼此之下并且子元素的起始位置将在左侧，所以float:left不会改变他们的立场。

可能更容易将列表元素视为布局和定位，以及视觉外观的锚元素。

#navbar #holder ul { list-style: none; margin: 0; padding:0; } #navbar #holder ul li { float:left; } #navbar #holder ul li a { text-decoration:none; line-height:20px; margin-right:5px; font-family:Calibri; color:#000; display:block; }

Answer 2

链接正在水平显示给我：

combinatoricslib

您是否在小视口中查看链接？另外，您使用的浏览器是什么？

float: left属性更常见的是应用于li元素，而不是封闭的a元素。

HTML浮动属性不起作用

2 个答案: