HTML浮动属性不起作用

Question

I am trying to create a tabs for my page, but my links are not appearing horizontally. 我正在尝试为页面创建一个选项卡，但是我的链接没有水平显示。 I have used float:left which is used to make links appear horizontally. 我使用过float：left，它用于使链接水平显示。 Please let me know why? 请让我知道为什么？

    <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

The float left property needs to be applied to the Li element. 需要将float左属性应用于Li元素。

In your code it is being applied to the a element within the Li. 在你的代码将被应用到李中的一个元素。

This can work, but if the parent element has any height (or if overflow:hidden is applied to it), they will stack up underneath each other and the starting position for the child elements will be on the left, so float:left won't change their position. 这可以工作，但是如果父元素具有任何高度（或者如果对其应用了overflow:hidden ），它们将在彼此下方堆叠，并且子元素的起始位置将在左侧，因此float:left获得了不要改变他们的位置。

It might be easier to think of the list elements as being for layout and positioning, and the anchor element for visual appearance. 可能更容易想到列表元素是用于布局和定位，锚元素是视觉外观。

#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

The links are appearing horizontally for me: 链接对我来说是水平出现的：

JSFiddle JSFiddle

Are you viewing the links in a small viewport? 您是否正在小视口中查看链接？ Also, what browser are you using? 另外，您使用的是哪种浏览器？

It is also more common for the float: left property to be applied to the li element, not the enclosed a element. 将float: left属性应用于li元素，而不是将其包含a元素中，这也更为常见。

HTML浮动属性不起作用

问题描述

2 个解决方案

解决方案1
2 2015-06-22 22:54:14

解决方案2
1 2015-06-22 22:57:06

HTML浮动属性不起作用

问题描述

2 个解决方案

解决方案1 2 2015-06-22 22:54:14

解决方案2 1 2015-06-22 22:57:06

解决方案1
2 2015-06-22 22:54:14

解决方案2
1 2015-06-22 22:57:06