將兩個文本放在一個div中（徽標和導航）

我想讓頁面頂部的一個導航欄同時擁有徽標和一些菜單項，如www.adidas.se上所示。不過，我不想使用圖像作爲標誌，只是純文本會做。因此，基本上在導航欄的右側會有一個日誌文本，而從左側將會有一個無序列表來保存菜單項。我需要徽標文字比其他文字大。將兩個文本放在一個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

你的元素都在塊中呈現。嘗試改變它們以顯示：inline-block。 – Nol

在_adidas.se_標誌被留下，菜單立即跟着......你寫了_on正確的logo和左側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

這就是真正需要的。其他建議使用浮動和flex更可能打破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

將兩個文本放在一個div中（徽標和導航）

回答

相關問題