Question

创建一个单页网站，导航使用＃跳转到不同的部分。经过三个部分后，我的所有标题（h1）都成了一个部分，我似乎无法改变它。

这是我的网格：

.full-width {
    width: 1140px;
    height: 1100px;
    margin: 0 auto;
    text-align: center;
}

.half-width {
    width: 1210px;
    float: left;
}

.third-width {
    width: 500px;
    float: left;
}

这是其中一个标题：

HTML：

<section id="registry">
    <div class="full-width">
        <h1> We have registries at these stores: </h1>
        <div class="half-width">
            <p> David Jones </p>
            <p> Myer </p>
            <p> Super Amart </p>
            <p> The Good Guys </p>
        </div>
    </div>
</section>

CSS：

#registry h1 {
    font-family: 'Indie Flower', cursive;
    font-size: 50px;
    color: #000000;
    padding: 30px 0;
    float: center;
}

#registry p {
    font-family: 'Indie Flower', cursive;
    font-size: 25px;
    display: inline-block;
    font-weight: bold;
    padding: 30px 50px;
}

Answer 1

我测试了你的代码并且工作正常，也进行了一些实验。检查我创建的代码笔进行测试，我不认为h1s是“聚集”。

<section id="registry">
    <div class="full-width">
        <h1> We have registries at these stores: </h1>
      <h1> We have registries at these stores: </h1>


        <div class="half-width">
            <h1> We have registries at these stores: </h1>
            <p> David Jones </p>
            <p> Myer </p>
            <p> Super Amart </p>
            <p> The Good Guys </p>
        </div>
    </div>
  <div class="full-width">
        <h1> We have registries at these stores: </h1>
      <h1> We have registries at these stores: </h1>
      <h1> We have registries at these stores: </h1>
        <div class="half-width">
            <p> David Jones </p>
            <p> Myer </p>
            <p> Super Amart </p>
            <p> The Good Guys </p>
        </div>
    </div>
</section>

http://codepen.io/adrianrios/pen/xqYZrG

我的所有h1都在页面中间聚集在一起

1 个答案: