如何创建水平项目列表？

我正在尝试创建一个水平项目列表，以便它们可以用作导航。但由于某种原因，将显示设置为inline不起作用。我也尝试将显示设置为inline-block，但没有结果。有什么建议么？如何创建水平项目列表？

CSS

#page { 
    margin-top: 2em; 
    background: #00000 
} 

#pageborder { 
    background-color: white; 
    margin-left: 150px; 
    margin-right: 150px; 
} 

body, html { 
    padding: 0; 
    margin: 0; 
    background-color: #EEEEEE; 
    height: 100%; 
    font-family:"Monospace", Lucida Console; 
    font-size: 16; 
} 

h1 { 
    font-size: 28pt; 
} 

h2 { 
    margin:0; 
    padding-bottom: 7px; 
    font-size: 22; 
} 

p { 
    margin-bottom:0px; 
    padding-bottom:0px; 
} 

#header { 
    height:50px; 
    background-color: none; 
    border-color: #E7E7E7; 
    font-size: 28pt; 
    color: white; 
    padding-top: 20px; 
    padding-bottom: 5px; 
    margin-top: 108px; 
} 

#content { 
    position: left; 
    color: #5E5849; 
    background-color: white; 
    border: 2px solid; 
    border-color: #EEEEEE; 
    text-align: left; 
    padding: 1em 2em 4em; 
    margin-left: 20px; 
    margin-right: 322px; 
} 

#sidebar { 
    float:right; 
    margin-right: 180px; 
    position: absolute; 
    top:; 
    right:0; 
    text-align: left; 
    width: 250px; 
    border: 2px solid; 
    border-color: #EEEEEE; 
    padding-top: 8px; 
    padding-left: 40px; 
} 

#twitter { 
    display: inline; 
    float: left; 
    margin-bottom: 10px; 
    margin-right: 20px; 
} 

#youtube { 
    display: inline; 
    float: left; 
    margin-bottom: 10px; 
    margin-right: 20px; 
} 

#google { 
    display: inline; 
    float: left; 
    margin-bottom: 10px; 
    margin-right: 20px; 
    padding-bottom: 2px; 
} 


#justin { 
    display: inline; 
    float: left; 
    margin-bottom: 10px; 
    margin-right: 20px; 
} 

#Social { 
    border-bottom: solid thin grey; 
    padding-bottom: 7px; 
    font-size: 15px; 
    margin-top: 10px; 
} 

#profilepic { 
    margin-bottom: 10px; 
} 

* { 
    margin: 0; 
} 

.footer { 
    margin-left: 100px; 
    height: 2em; 
    color: white; 
    clear: both; 
    background-color: black; 
} 

th { 
    text-align: left; 
    padding-right: 2em; 
} 

#nav { 
    width:100%; 
    height:30px; 
    background-color:#999; 
} 

#nav ul { 
    display: inline-block; 
    list-style-type: none; 
    height:150px; 
    color: red; 
    padding-left: 150px; 
} 

#nav ul li { 
    display:inline; 
}

HTML

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="template.css" /> 
    <title>Template</title> 
</head> 
<body> 
    <div id="page"> 
     <div id="pageborder"> 
      <div id="header"> 
       <img src="banner.png" width=600 height=74.18> 
      </div> 
      <div id="nav"> 
       <ul> 
        <li><a href="index.html">Home</a></li> 
        <li><a href="about">About</a></li> 
        <li><a href="links">Links</a></li> 
       </ul> 
      </div> 
      <div id="sidebar"> 
       <table> 
        <tr> 
         <div id="Social"><p><b>Social</b></p></div> 
         <p> 
          <div id="youtube"> 
           <a href="http://www.youtube.com/ksheehan77" target="_blank"> 
            <img src="youtube_icon.png" width=36 height=36> 
           </a> 
         </div> 
          <div id="twitter"> 
           <a href="http://www.twitter.com/#!/ksheehan77" target="_blank"> 
            <img src="Twitter.png" width=32 height=32> 
           </a> 
          </div> 
          <div id="justin"> 
           <a href="http://www.justin.tv/ksheehan77" target="_blank"> 
            <img src="justintv.png" width=32 height=32> 
           </a> 
          </div> 
          <div id="google"> 
           <a rel="author" href="https://profiles.google.com/110661467085975877308/" target="_blank"> 
            <img src="http://ssl.gstatic.com/images/icons/gplus-32.png" width="32" height="32"> 
           </a> 
          </div> 
         </p> 
        </tr> 
       </table> 
      </div> 
      <div id="content"> 
       <h2>Content</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus nunc eget sem iaculis pharetra. Integer sodales interdum accumsan. In et diam neque. Praesent eget erat id lectus rutrum placerat a a purus. Integer molestie arcu vel orci iaculis sagittis consequat mauris hendrerit. Fusce placerat leo ac tortor fringilla posuere. Quisque et enim nisl, eu laoreet nibh. Sed vitae turpis leo. Etiam dictum pretium faucibus. Nam quis ornare nibh. Sed ultricies lacinia dolor ac ullamcorper. Sed dictum enim ut urna consequat quis bibendum mi eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec blandit nisi vitae dui blandit ultrices.</p> 

        <p>Aliquam enim ligula, pharetra at scelerisque eu, imperdiet vel lorem. Phasellus faucibus nunc ac purus imperdiet eleifend. Praesent id scelerisque massa. Suspendisse sed ornare lectus. Duis eget lacus quam, quis pharetra magna. Phasellus rhoncus, lectus et dictum accumsan, diam justo volutpat urna, ac auctor leo velit in augue. Proin eget nisi vel turpis hendrerit tempor sed a odio. Phasellus lacinia placerat lobortis. Vestibulum consequat bibendum semper. Vivamus cursus eros non felis gravida fermentum. Donec pulvinar, nisl a varius volutpat, ante lectus varius erat, ac sodales nisl nulla sed eros. Nam bibendum cursus bibendum. Nam id orci vitae odio consequat vestibulum eu vitae ipsum. Fusce ullamcorper pretium est, eget elementum mauris tristique vitae.</p> 

        <p>Suspendisse facilisis mauris eget mi tempus porta. Morbi viverra, libero sed posuere porta, est purus commodo nunc, ac interdum lacus eros et turpis. Pellentesque consequat sagittis elit vel imperdiet. Pellentesque elementum, eros eget vestibulum tempor, justo metus volutpat purus, sed viverra justo odio et erat. Maecenas id urna quam. Praesent auctor congue venenatis. Aenean dolor nisl, viverra vitae ornare sed, pretium sed nibh. Pellentesque pharetra pellentesque ipsum, in ornare lacus iaculis vel. Aliquam quis arcu lectus, eu pretium est. Integer a urna dui, vel tincidunt magna.</p> 

        <p>Nulla mauris felis, mollis at egestas at, suscipit at sem. Donec tincidunt, tellus at consectetur consectetur, elit nisi ullamcorper dolor, vel posuere odio sapien quis ligula. Proin nunc arcu, commodo id hendrerit pulvinar, hendrerit a ligula. Nulla sagittis iaculis est, eleifend mollis dolor ullamcorper a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc non urna non nulla mollis rhoncus. Mauris eu urna tortor, et tincidunt diam.</p> 

        <p>Ut vehicula sodales nisi eu viverra. Donec nec sollicitudin nisi. Quisque tristique massa vel felis gravida iaculis. Proin a urna quis lacus facilisis viverra. In lacus nunc, faucibus sed luctus sit amet, tempor vitae nunc. Sed erat urna, ultricies non pretium at, vehicula id nibh. Sed sed dolor nisl. Duis nisi felis, euismod sit amet pulvinar ac, hendrerit vel tellus. Fusce vehicula tristique pellentesque. Cras molestie laoreet viverra.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <center> 
     <div class="footer">Kieran Sheehan - 2012</div> 
    </center> 
</body> 
</html>

来源

2012-04-30 KSheehan77

在这里工作http://jsfiddle.net/heera/rb7B4/ –

'display：inline'自动将list-style-type设置为'none'，无论如何我试过你的代码正在工作！ –

而不是'display：inline;'使用'float：left;' – mgraph

很适合我。你有一些其他的CSS规则可能会与这些规则相冲突吗？也许你可以用chrome开发者控制台检查哪些样式适用于你的“li”。

顺便说一句，“列表样式类型”是指与“UL”或OL”，不与‘礼’可以采用使用

来源

2012-04-30 21:16:19 Gaet

我该怎么做呢？我也删除了list-style-type 如果你使用的是chrome，不知道你不能在li – KSheehan77

中使用它，右键点击你的“li”，然后点击“inspect element”。这将打开“元素”选项卡上的开发人员控制台，并预先选择“li”。在右侧，您可以看到应用于它的所有样式。这可以让你知道什么可能会出错... – Gaet

作品：

<html> 
    <head> 
    <style type="text/css"> 
     #nav{ 
     width:100%; 
     height:30px; 
     background-color:#999; 
     } 

     #nav ul{ 
     height:150px; 
     color: red; 
     padding-left: 150px; 
     } 

     #nav ul li{ 
     display:inline; 
     list-style-type: none;} 
    </style> 
    </head> 

    <div id="nav"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="about">About</a></li> 
     <li><a href="links">Links</a></li> 
    </ul> 
    </div> 
</html>

尝试刷新你的浏览器使用Ctrl + F5 - 它可能已经缓存了一些不起作用的结果

来源

2012-04-30 21:22:03 Mark

+1显示完整的代码示例。 –

@马克仍然没有运气。我会发布所有代码吗？没有那么多？我能否与其他标签有冲突 – KSheehan77

@ KSheehan77您正在尝试使用哪种浏览器？您的Template.css文件与您的html文件位于同一个目录中吗？我复制和粘贴你的代码，它立即为我工作。 – Mark

虽然你的css不包含这样的属性，但确保你的li元素不清除（即清除：left/clear： right/clear：both）

要仔细检查，添加这个到你的CSS（使用！重要的是不好的，只会用它来测试）

#nav ul li{ 
    clear: none !important; 
}

尝试加入飘得看到，如果你设法让你的元素出现在同一行。如果你仍然没有运气，那么你的设置肯定有问题，这从你粘贴的代码中看不出来。

来源

2012-04-30 23:42:08

#nav ul{ 
display: inline-block; 
list-style-type: none; 
height:150px; 
color: red; 
***padding-left: 150px;***}

我想在这里你做错了;删除填充ul，可能会它会工作

来源

2012-05-02 14:30:37 Chandrakant

如何创建水平项目列表？

回答

相关问题