Question

每当我在移动设备上查看导航时，我都希望其导航位于“ Acme Web Design”标题下。我所有的元素都放置在笔记本电脑屏幕的正确位置，但是当我检查它是否响应时，它们并没有放置在我希望它们出现的位置。

这是我的标题在响应式视图中的样子。

这是我使用的HTML和CSS文件。

.headerdiv {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* Header */
header{
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding-top: 30px;
    min-height: 70px;
}
nav {
    float: right;
    margin-bottom: 30px ;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

<header>
    <div class="container">
        <div class="headerdiv">
            <h1>Acme Web Design</h1>
            <nav>
                <a href="index.html">HOME</a>
                <a href="about.html">ABOUT</a>
                <a href="services.html">SERVICES</a>
            </nav>
        </div>
    </div>
</header>

这就是我希望标题显示为

Answer 1

如下更改容器的flex设置（尤其是flex-direction: column;），对text-align: center的子元素使用.headerdiv以将其居中，并删除浮点数以将所有元素包括在父元素/背景

哦，将这些额外的规则放在媒体查询中，以保持桌面视图不变-下面的代码段仅显示移动视图，不显示媒体查询（因为您的内容中没有任何内容）代码）

headerdiv {
  display: flex;
  flex-direction: column;
}
.headerdiv>* {
  text-align: center;
}

/* Header */

header {
  background-color: #35424a;
  border-bottom: 2px solid #ff6600;
  color: white;
  padding-top: 30px;
  min-height: 70px;
}

nav {
  margin-bottom: 30px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

<body>
  <header>
    <div class="container">
      <div class="headerdiv">
        <h1>Acme Web Design</h1>
        <nav>
          <a href="index.html">HOME</a>
          <a href="about.html">ABOUT</a>
          <a href="services.html">SERVICES</a>
        </nav>
      </div>
    </div>
  </header>

Answer 2

更改类.headerdiv的css属性，并删除nav类。

.headerdiv {
    text-align: center;
    margin-bottom: 30px;
    }

    /* Header */
    header {
    background-color: #35424a;
    border-bottom: 2px solid #ff6600;
    color: white;
    padding-top: 30px;
    min-height: 70px;
    }

    nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

Answer 3

我想这就是您想要实现的目标。这是工作中的Codepen Link

<header>
  <div class="container">
    <div class="headerdiv">
      <h1><span>Acme</span> Web Design</h1>
      <nav>
        <a href="index.html" class="active">HOME</a>
        <a href="about.html">ABOUT</a>
        <a href="services.html">SERVICES</a>
      </nav>
    </div>
  </div>
</header>

Cmake

Answer 4

尝试此操作。在任何设备上您都会得到相同的结果。

如果您想增加菜单的大小，可以使用font-size来实现。

	headerdiv {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

/* Header */
header{

background-color: #35424a;
border-bottom: 2px solid #ff6600;
color: white;
padding-top: 8px;
min-height: 70px;

}

nav {

/* float: right; */
text-align: center;
margin-bottom: 30px ;

}

nav a {

color: white;
text-decoration: none;
padding: 10px;

}

<header>
		<div class="container">
			<div class="headerdiv">	
				<div>
					<h1 style="text-align: center;">Acme Web Design</h1>
				</div>
				<div>
				<nav>
					<a href="index.html">HOME</a>
					<a href="about.html">ABOUT</a>
					<a href="services.html">SERVICES</a>
				</nav>
			</div>
			</div>
		</div>
</header>

如何将我的nav元素放在标题元素下？

4 个答案: