製作垂直標題水平

-2

我正在嘗試使下面的頁面水平，而不是垂直。我想這樣做，因爲它意在成爲網站頂部的標題。謝謝。製作垂直標題水平

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
    background-color: #f1f1f1; 
 
} 
 
     
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 
     
 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2016-11-14 Giacomo Lawrance

您還沒有開始'

'，但您有一個結束標籤！ –

沒有''！ –

用於錯誤編碼的Downvote。沒有像 –

問題與您的代碼：

的<header>元素是錯誤的，應該是<head>。
有沒有<html>標籤。
</header>是孤兒。
沒有關於</body>和</head>的結束標籤。

只是做了兩件事情：

爲<ul>取出width。
爲<li>添加display: inline-block。

代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     background-color: #f1f1f1; 
     } 

     ul li { 
     display: inline-block; 
     } 

     li a { 
     display: block; 
     color: #000; 
     padding: 8px 16px; 
     text-decoration: none; 
     } 

     /* Change the link color on hover */ 
     li a:hover { 
     background-color: #555; 
     color: white; 
     } 
    </style> 
    </head> 
    <body> 

    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li><a href="#contact">Contact</a></li> 
     <li><a href="#about">About</a></li> 
    </ul> 
    </body> 
</html>

來源

2016-11-14 14:19:51

太棒了，謝謝！添加它，似乎運作良好。感謝您的幫助！ –

試試下面的CSS屬性li

float: left;

來源

2016-11-14 14:18:46

你的代碼中有幾個錯誤：看看這個：

<!DOCTYPE html> 
    <html> 

    <head> 
     <style> 
      ul { 
       list-style-type: none; 
       margin: 0; 
       padding: 0; 
    /*   width: 200px;*/ 
       background-color: #f1f1f1; 
      } 
      li {display: inline-block} 
      li a { 
       display: block; 
       color: #000; 
       padding: 8px 16px; 
       text-decoration: none; 
      } 
      /* Change the link color on hover */ 

      li a:hover { 
       background-color: #555; 
       color: white; 
      } 
     </style> 
    </head> 

    <body> 

     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#news">News</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li><a href="#about">About</a></li> 
     </ul> 
    </body> 

    </html>

來源

2016-11-14 14:20:05 DaFois

與display:inline-block其表演水平和width增加會自動的顯示爲登錄。如果你沒有需要改變寬度爲px`

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width:auto; 
 
    background-color: #f1f1f1; 
 
    
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 

 
} 
 
li{display:inline-block;} 
 

 
/* Change the link color on hover */ 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
}

<ul> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul>

來源

2016-11-14 14:21:16 prasanth

你需要把「顯示：inline-block的」爲李。

<style> 
ul li{ 
    display:inline-block; 
    width: 20%; /* put width as per your requirement*/ 
} 
</style>

來源

2016-11-14 14:22:33 Taniya

製作垂直標題水平

回答

相關問題