如何創建水平項目列表？

我正在嘗試創建一個水平項目列表，以便它們可以用作導航。但由於某種原因，將顯示設置爲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

如何創建水平項目列表？

回答

相關問題