垂直ヘッダーを水平にする

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

問題のためのCSSプロパティ下の試み：

<header>要素が間違っている、<head>でなければなりません。
<html>タグはありません。
</header>は孤立しています。
</body>と</head>の終了タグはありません。
- が<ul>ためwidthを削除します。
はちょうど2つのことを行います。
<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

素晴らしいです、ありがとう！それを加えて、うまくいくようです。大きな助けをありがとう！ –

あなたのコードと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

水平およびwidthとしてのショーはようにそのショーAUTOになりますdisplay:inline-blockに追加ログ。リーのために：あなたは何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

に変化幅を必要とする場合は、「インラインブロック表示」を配置する必要がありません。

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

出典

2016-11-14 14:22:33 Taniya

垂直ヘッダーを水平にする

答えて

関連する問題