制作垂直标题水平

-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

制作垂直标题水平

回答

相关问题