Question

我想让页面顶部的一个导航栏同时包含徽标和一些菜单项，如www.adidas.se上所示。但是，我不想使用图像作为徽标，只需要纯文本即可。因此，基本上在导航栏的右侧会有一个logotext，从左侧会有一个无序列表，用于保存菜单项。我需要徽标文本比其他文本更大。

到目前为止，这是我的代码：

* {
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>

Answer 1

我建议您使用display:inline-block进行大部分定位。检查下面的代码段，让我知道它是否有帮助，如果您需要更多帮助或澄清：）

＆＃13;

* {
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;
  }

＆＃13;

<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>

＆＃13;

Answer 2

将标题设为包含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>

Answer 3

我想理想的做法是将所有标题信息放在div或header中，然后将信息浮动到其中。

header {
	background: red;
	color: white;
	position: relative;
	width: 100%;
	height: 80px;
}
.header, .nav {
	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>

	<div class="container">
		<header>
			<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>
		</header>
	</div>
</body>

但在那之后，你仍然需要设计很多东西，比如nav。还有很多工作要做。

Answer 4

也许是这样的？

* {
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>

将两个文本放在一个div中（徽标和导航）

4 个答案: