将两个文本放在一个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中（徽标和导航）

回答

相关问题