我想根据我的段落调整标题。可能吗？

Question

我的CSS有问题。顶部导航后的内容未正确对齐。我在代码中使用了float: left和right，然后应用了一个clearfix来对齐下一个标头，但是它对我不起作用。我希望标题与段落对齐。

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#top-bar {
  width: 100%;
  height: 51px;
  background: #ba2e1f;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
}

#top-bar ul li {
  display: inline;
  line-height: 51px;
  padding: 0 7px 0 0;
  float: left;
}

#top-bar ul li a {
  list-style: none;
  text-decoration: none;
  font-weight: lighter;
  font-size: 14px;
  border-right: 1px solid white;
  padding: 0 6px 0 0px;
  color: white;
  display: inline;
}

#top-bar input {
  float: right;
  height: 25px;
  width: 210px;
  margin: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

.clear {
  clear: both;
}

#container {
  width: 960px;
  margin: 0 auto;
  background-color: #ffffff;
}

<div id="top-bar">
  <div id="wrapper">
    <ul>
      <li><a href="">Sign Up</a></li>
      <li><a href="">Login</a></li>
      <li><a href="">RSS Feeds</a></li>
      <li><a href="">Archived News</a></li>
    </ul>
    <input type="search" placeholder="Search..">
    <div class="clear"></div>
  </div>
</div>

<div id="container">
  <header>
    <h1>My new Project</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, minus.</p>
  </header>

  <nav></nav>
  <section id="intro"></section>
  <section id="content"></section>
  <footer></footer>
  <div id="foot"></div>
</div>

Answer 1

需要花费很多时间来对齐父div。因此，如果您想将标题向左对齐，则在这种情况下必须将父元素作为标头。 将其添加到CSS中就可以了。如果需要，可以重命名该类。 HTML：

  <header class="test">
    <h1>My new Project</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, minus.</p>
  </header>

CSS：

.test {
  float:left;
}

如果您希望两者都居中，则可以使用

.test {
  float:center;
  text-align: center;
}

希望这会有所帮助，如果您还有其他问题，请告诉我。

Answer 2

您会尝试使用此代码吗？

header {display: flex; align-items: center; justify-content: center; width: 100%;}

Answer 3

我不确定您的问题。当我查看您所做的操作时，会看到页眉和文本在同一左对齐上。

但是，我建议使用Flex-box而不是float。浮动内容会变得凌乱，只能用于段落内的内容（例如新闻报道）。

 * {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#top-bar {
  width: 100%;
  height: 51px;
  background: #ba2e1f;
}

#wrapper {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

#top-bar ul li {
  display: inline-block;
  line-height: 51px;
  padding: 0 7px 0 0;
}

#top-bar ul li a {
  list-style: none;
  text-decoration: none;
  font-weight: lighter;
  font-size: 14px;
  border-right: 1px solid white;
  padding: 0 6px 0 0px;
  color: white;
}

#top-bar input {
  height: 25px;
  width: 210px;
  margin: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

.clear {
  clear: both;
}

#container {
  width: 960px;
  margin: 0 auto;
  background-color: #ffffff;
}

<div id="top-bar">
  <div id="wrapper">
    <ul>
      <li><a href="">Sign Up</a></li>
      <li><a href="">Login</a></li>
      <li><a href="">RSS Feeds</a></li>
      <li><a href="">Archived News</a></li>
    </ul>
    <input type="search" placeholder="Search..">
  </div>
</div>

<div id="container">
  <header>
    <h1>My new Project</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, minus.</p>
  </header>

  <nav></nav>
  <section id="intro"></section>
  <section id="content"></section>
  <footer></footer>
  <div id="foot"></div>
</div>

Answer 4

只需将您的文本和标题封装在div中，然后与您的类一起添加text-align-center， 重要提示：请注意不要将属性直接放在标签上。宁愿选择类来修改多个元素或单个元素的ID

.block{
  text-align:center;
}

<header>
      <div class="block">
         <h1>My new Project</h1>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, minus.</p>
      </div>
  </header>

Answer 5

  #container {
  width: 960px;
  margin: 0 auto;
  background-color: #ffffff;
  display: inline-block;
  }
  #container header h1{
  margin-top: 5px;
  margin-left: 10px;
  }
  #container header p{
  margin-top: 5px;
  margin-left: 10px;
  }

您必须使div成为内联块元素。由于h1是块级元素，因此要更改h1。

h1 is block level element.