将两个文本放在一个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>
我的建议是使用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>
这就是真正需要的。其他建议使用浮动和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
。还有很多工作要做。
也许这样?
* {
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>
使头部与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>
你的元素都在块中呈现。尝试改变它们以显示:inline-block。 – Nol
在_adidas.se_标志被留下,菜单立即跟着......你写了_on正确的logo和左侧menu_,这是它吗? – LGSon