2つのテキストを1つのdivに入れます（ロゴとナビゲーション）

ページの上部にある1つのnavbarに、www.adidas.seのようなロゴといくつかのメニュー項目を入れたいとします。しかし、私はロゴとしてイメージを使用したくない、ちょうどプレーンテキストが行います。したがって、基本的にはナビゲーションバーの右側にログテキストがあり、左側からはメニュー項目を保持する順序のないリストがあります。私は、他のテキストよりも大きくなるようにロゴテキストを必要とします。2つのテキストを1つのdivに入れます（ロゴとナビゲーション）

これは、これまでの私のコードです：

* { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
body { 
 
background: yellow; 
 
font-family: 'Josefin', sans-serif; 
 
} 
 

 
.container { 
 
width: 100%; 
 
} 
 

 
.header { 
 
background: red; 
 
color: white; 
 
position: relative; 
 
}

<html lang="sv-se"> 
 
<head> 
 
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" href="style.css" type="text/css"> 
 
<meta charset="utf-8"/> 
 
<title>TITLE TEXT</title> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<div class="header"> 
 
<h1>LOGO</h1> 
 
</div> 
 

 
<div class="nav"> 
 

 

 
<ul> 
 
<li><a href="">ITEM 1</a></li> 
 
<li><a href="">ITEM 2</a></li> 
 
<li><a href="">ITEM 3</a></li> 
 
<li><a href="">ITEM 4</a></li> 
 
</ul> 
 

 

 
</div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-02-14 Heresh

あなたの要素はすべてブロックでレンダリングされています。表示するように変更してください：インラインブロック。 – Nol

_adidas.se_にロゴが残っています。すぐにメニューが続きます。右はロゴ、左側はmenu_から書かれていますので、どちらですか？ – LGSon

私は何を示唆することは、あなたのポジショニングのほとんどのためdisplay:inline-blockを使用しています。以下のスニペットを確認し、それが助けなら、私に知らせて、そしてあなたがより多くのヘルプまたは説明:)

* { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
body { 
 
background: yellow; 
 
font-family: 'Josefin', sans-serif; 
 
} 
 

 
.container { 
 
width: 100%; 
 
} 
 

 
.header { 
 
background: red; 
 
color: white; 
 
position: relative; 
 
} 
 

 
.nav { 
 
    display: inline-block; 
 
    } 
 

 
.nav ul li { 
 
    display:inline-block; 
 
    list-style:none; 
 
    } 
 
.header h1{ 
 
    display: inline-block; 
 
    }

<html lang="sv-se"> 
 
<head> 
 
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" href="style.css" type="text/css"> 
 
<meta charset="utf-8"/> 
 
<title>TITLE TEXT</title> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 

 
<div class="header"> 
 
<h1>LOGO</h1> 
 
    <div class="nav"> 
 
<ul> 
 
<li><a href="">ITEM 1</a></li> 
 
<li><a href="">ITEM 2</a></li> 
 
<li><a href="">ITEM 3</a></li> 
 
<li><a href="">ITEM 4</a></li> 
 
</ul> 
 
</div> 
 

 
</div> 
 

 
</div> 
 
</body> 
 
</html>

出典

2017-02-14 17:49:17

これは本当に必要なすべてです。浮動小数点とフレックスを使用する他の提案は、望ましい結果を達成するよりもCSSを破る可能性が高くなります。 – Nol

うれしかった！あなたのプロジェクトに幸運。 –

を必要とする場合、私は理想的にはdivの中で、すべてのヘッダー情報を置くことであろうと思いますまたはheaderを入力し、情報を内部にフロートします。

header { 
 
\t background: red; 
 
\t color: white; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t height: 80px; 
 
} 
 
.header, .nav { 
 
\t float: left; 
 
} 
 

 
* { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
body { 
 
background: yellow; 
 
font-family: 'Josefin', sans-serif; 
 
} 
 

 
.container { 
 
width: 100%; 
 
} 
 

 
.header { 
 
background: red; 
 
color: white; 
 
position: relative; 
 
}

<body> 
 

 
\t <div class="container"> 
 
\t \t <header> 
 
\t \t \t <div class="header"> 
 
\t \t \t \t <h1>LOGO</h1> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="nav"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="">ITEM 1</a></li> 
 
\t \t \t \t \t <li><a href="">ITEM 2</a></li> 
 
\t \t \t \t \t <li><a href="">ITEM 3</a></li> 
 
\t \t \t \t \t <li><a href="">ITEM 4</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t </header> 
 
\t </div> 
 
</body>

しかし、その後、あなたはまだnavのように、たくさんのことをスタイルする必要があります。まだやるべきことはたくさんあります。

出典

2017-02-14 17:50:38

多分このような何か？

* { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
body { 
 
background: yellow; 
 
font-family: 'Josefin', sans-serif; 
 
} 
 

 
.header-container { 
 
    width: 100%; 
 
    position:fixed; 
 
    background:#acacac; 
 
} 
 

 
.header-text { 
 
    display: inline-block; 
 
    background: red; 
 
    color: white; 
 
    font-size:2em; 
 
} 
 

 
.nav { 
 
    display:inline-block; 
 

 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
} 
 
.nav ul li{ 
 
    display:inline-block; 
 
}

<html lang="sv-se"> 
 
<head> 
 
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" href="style.css" type="text/css"> 
 
<meta charset="utf-8"/> 
 
<title>TITLE TEXT</title> 
 
</head> 
 
<body> 
 

 
<div class="header-container"> 
 

 
    <div class="header-text"> 
 
     LOGO 
 
    </div> 
 

 
    <div class="nav"> 
 
    <ul> 
 
     <li><a href="">ITEM 1</a></li> 
 
     <li><a href="">ITEM 2</a></li> 
 
     <li><a href="">ITEM 3</a></li> 
 
     <li><a href="">ITEM 4</a></li> 
 
    </ul> 
 

 

 
    </div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-02-14 17:55:07 flynorc

ヘッダをposition: relativeと固定幅コンテナを作成し、ヘッダ内のリストとh1絶対位置インラインブロック、以下のようにbottomとleft/right値を有する：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: yellow; 
 
    font-family: 'Josefin', sans-serif; 
 
} 
 
.header { 
 
    position: relative; 
 
    height: 80px; 
 
    background: red; 
 
    color: white; 
 
    padding: 5px; 
 
} 
 
.header h1 { 
 
    position: absolute; 
 
    right: 5px; 
 
    bottom: 0; 
 
} 
 
.nav ul { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
.nav ul li { 
 
    display: inline-block; 
 
} 
 
.nav ul li a { 
 
    text-decoration: none; 
 
}

<html lang="sv-se"> 
 

 
<head> 
 
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" href="style.css" type="text/css"> 
 
    <meta charset="utf-8" /> 
 
    <title>TITLE TEXT</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="container"> 
 

 
    <div class="header"> 
 
     <div class="nav"> 
 
     <ul> 
 
      <li><a href="">ITEM 1</a> 
 
      </li> 
 
      <li><a href="">ITEM 2</a> 
 
      </li> 
 
      <li><a href="">ITEM 3</a> 
 
      </li> 
 
      <li><a href="">ITEM 4</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <h1>LOGO</h1> 
 
    </div> 
 

 

 
    </div> 
 
</body> 
 

 
</html>

出典

2017-02-14 17:55:48 Johannes

2つのテキストを1つのdivに入れます（ロゴとナビゲーション）

答えて

関連する問題