Question

我正在使用<section>来包装少量<articles>。我已经阅读过我<h1>每个<section>也可以使用一个<article>。

标签<article>完美地包装了标题标签，允许我在列中添加许多标题，文章一篇文章。 <section>也不会发生同样的情况。

我的标题标签溢出了水平覆盖100％的区域。我知道标题标签默认有这种行为（断行），但我想让<section>将它们包裹起来<article>。

标题标签对SEO很重要，这就是为什么我想找到一种方法来做到这一点。

任何帮助将不胜感激。

http://jsfiddle.net/8rgMK/

Answer 1

这是由于section元素上添加的填充（以及article元素上的不）引起的。

添加此CSS：

＆＃13;

header, section, footer, aside {
     padding: 1.25em;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
     display: block;
}
section {  /* ADDED */
    padding: 0;
    padding-bottom: 1.25em;
}

section > h1{
    font-size: 2.375em;
    margin-bottom: 0.50em;
}

article {  /* ADDED */
    margin: 0 1.25em;
}

article >  h1{
    text-align: center;
    font-size: 1.500em;   
}

article > .content{
    padding: 0.625em;
    text-align: left;
}

h1 {
    background: #e74c3c;
}
article {
    background: #bdc3c7;
}
section {
    background: #34495e;
}

＆＃13;

<section class="region region-special-offers">
   <h1>Special Offers</h1><!-- This one overflows -->
   <article id="block-block-10" class="col span_2 block block-block">
      <h1>St. Patrick’s Day 2014</h1><!-- This other tag doesn't -->
      <div class="content"></div>
   </article>
   <article id="block-block-11" class="col span_2 block block-block">
      <h1>Weekly Package</h1>
      <div class="content"></div>
   </article>
</section>

＆＃13;

Answer 2

当我使用responsive.gs框架时，我忘记将类设置为部分以表现为列。我只是在文章之间设置相同的类。

SECTION标签不包装H1标签

2 个答案: