段落とリストを正しくインライン化するにはどうすればよいですか？

だから私は同じ行にしようとしているこのhtml &のCSSコードを持っています。私は彼らがブロックラインであることを確信しています。なぜ彼らは同じ行にいませんか？私はそれらをウェブサイトの同じ行に正確に残すにはどうすればよいですか？申し訳ありませんjsFiddleを使用していないため、私は本当に試してみました。段落とリストを正しくインライン化するにはどうすればよいですか？

私の最初の試み：あなたは、彼らが、これは何をあるので、私は、私はdivの中にそれらを入れてみましたやったと同じライン上にない見ることができるように

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="styles.css"> 
    <title>Product Showcase</title> 
    </head> 
    <body> 
    <p id="Logo">VARGA NET</p> 
     <ul id="navigation"> 
     <li>SPECIFICATIONS</li> 
     <li>LOOK AT IT</li> 
     <li>FEATURES</li> 
     <li>FREE</li> 
     <li>TESTIMONIALS</li> 
     <li>HOME</li> 
     </ul> 
    </body> 
</html>

CSS

body { 
    background-image: url(Images/background.png); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 

#Logo{ 
    color: White; 
    font-size: 20px; 
    font-weight: bold; 
    font-family: sans-serif; 
    padding-left: 60px; 
    padding-top: 20px; 
} 

li{ 
    color: white; 
    float: right; 
    padding: 8px; 
    display: inline; 
    list-style: none; 
}

私は一緒に来ました。彼らは同じ行にありますが、私は悪い方法でそれをやったように感じます。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="styles.css"> 
    <title>Product Showcase</title> 
    </head> 
    <body> 
      <div inline-block class="headerLogoAndMenu"> 
      <p id="Logo">VARGA NET</p> 
      <ul id="navigation"> 
       <li>SPECIFICATIONS</li> 
       <li>BUY NOW</li> 
       <li>FEATURES</li> 
       <li>PRICE</li> 
       <li>TESTIMONIALS</li> 
       <li>HOME</li> 
      </ul> 
      </div> 
    </body> 
</html>

CSS

.headerLogoAndMenu li{ 
    font-family: sans-serif; 
    transition:0.5s; 
    color: white; 
    float: right; 
    padding-right: 8px; 
    padding-left: 8px; 
    padding-top: 16px; 
    display: inline; 
    list-style: none; 
} 
.headerLogoAndMenu #Logo{ 
    font-family: sans-serif; 
    transition:0.5s; 
    color: white; 
    float: right; 
    display: inline; 
    list-style: none; 
}

出典

2017-06-18 Christoffer Nilsson

これを行う方法...

.headerLogoAndMenu { 
 
    display: table; 
 
} 
 

 
.headerLogoAndMenu p { 
 
    display: table-cell; 
 
} 
 

 
.headerLogoAndMenu ul { 
 
    display: table-cell; 
 
} 
 

 
.headerLogoAndMenu ul li { 
 
    display: table-cell; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    <title>Product Showcase</title> 
 
    </head> 
 
    <body> 
 
    <div class="headerLogoAndMenu"> 
 
     <p id="Logo">VARGA NET</p> 
 
     <ul id="navigation"> 
 
     <li>SPECIFICATIONS</li> 
 
     <li>BUY NOW</li> 
 
     <li>FEATURES</li> 
 
     <li>PRICE</li> 
 
     <li>TESTIMONIALS</li> 
 
     <li>HOME</li> 
 
     </ul> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-06-18 21:27:06

？ –

@ChristofferNilsson申し訳ありませんが、それは 'ul'であるはずでした。単純なスニペットでは本当に必要なわけではありませんが、テーブルセルを指定すると良いです –

リストアイテムを並べて並べる方法はありますか？ –

この

を行う別の方法

出典

2017-06-18 21:29:20

私はロゴとメニューのレイアウトにflexboxesを使用していました。中央には垂直方向のアライメントが配置されています。 "u" は.headerLogoAndMenuのu {中から来たん

.headerLogoAndMenu { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
#navigation { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-items: center; 
 
    flex-wrap: nowrap; 
 
} 
 

 
.headerLogoAndMenu li { 
 
    font-family: sans-serif; 
 
    font-size: 10px; 
 
    padding-right: 4px; 
 
    padding-left: 4px; 
 
    list-style: none; 
 
} 
 

 
#Logo { 
 
    font-family: sans-serif; 
 
}

<div class="headerLogoAndMenu"> 
 
    <p id="Logo">VARGA NET</p> 
 
    <ul id="navigation"> 
 
    <li>SPECIFICATIONS</li> 
 
    <li>BUY NOW</li> 
 
    <li>FEATURES</li> 
 
    <li>PRICE</li> 
 
    <li>TESTIMONIALS</li> 
 
    <li>HOME</li> 
 
    </ul> 
 
</div>

出典

2017-06-18 21:33:32 Gerard

段落とリストを正しくインライン化するにはどうすればよいですか？

答えて

関連する問題