HTML浮动属性不起作用

我想为我的页面创建一个选项卡，但我的链接不是水平显示。我用float：left来使链接水平显示。请让我知道为什么？HTML浮动属性不起作用

<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>

来源

2015-06-22 Gurdeep Kaur

它在IE中工作。您使用哪个浏览器进行测试？尝试将“float：left”移动到li元素而不是a。 – m69

你的代码似乎很好地工作。下面是它的一个小提琴：http://jsfiddle.net/Lujp9k15/ – icecub

OP的代码_can_工作，如果没有CSS或浏览器默认给li元素一些高度。更详细地修改了我的答案 – theHands

float左属性需要应用于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; }

来源

2015-06-22 22:54:14 theHands

的链接，我水平出现：

JSFiddle

你在一个小视窗观看的链接？另外，你使用什么浏览器？

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

来源

2015-06-22 22:57:06

HTML浮动属性不起作用

回答

相关问题