Question

我有一个简单的页面，其中包含一个标题元素，该标题元素包含嵌套在h1元素中的锚标记内的徽标图像和包含4个链接的导航元素。在下面，我有两个元素，每个元素都有图像和文字。我想知道为什么当我调整浏览器窗口大小时我的标题会分开，为什么文本没有环绕他们的尊重图像并且落在他们的右边。我还注意到，当我悬停通过徽标时，它还有一个很小的区域，它仍然是一个它不应该的链接。我非常感谢这里提供的任何帮助，因为我希望了解用css引发的问题。

http://s27.postimg.org/7eyff3ivn/header_break1.png

http://s28.postimg.org/fwg9lohjh/header_break2.png

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>Acme</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="">
   <link rel="stylesheet" href="layout.css">
</head>

<body>

      <header>
    <h1><a href="index.html"><img src="images/logo.png" alt="Respond"></a></h1>

        <nav>   
           <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
           </ul>
        </nav>

    </header>

    <section class="first">

        <h2>Image 1</h2>

        <figure>    
            <img src="images/featured.png" alt="Image 1" />
        </figure>

        <p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam<br>
            melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br> 
            autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br> 
            mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br> 
            libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br> 
            at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>

    </section>

    <section class="second">

        <h2>Image 2</h2>

        <figure>
           <img src="images/featured.png" alt="Image 2" />
        </figure>

        <p>Lorem ipsum dolor sit amet, et eum vocibus neglegentur, id nisl quidam
            melius nam. Agam inani vel ei, reque putent oportere qui ad. Cum<br> 
            autem veniam in, soluta everti volumus no ius. Utinam tritani est ex,<br> 
            mei decore putent vidisse ne, an justo nulla eirmod duo. Te liber<br> 
            libris adolescens eos, id regione gloriatur neglegentur pri. Mei sanctus deleniti repudiandae<br> 
            at, sit tritani fabulas dissentias et, salutandi vituperata vim ex.</p>

    </section>

    <footer>    
        <p id="copyright">&copy; 2014 ACME</p>
    </footer>

</body>
</html>

CSS

/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 16px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}  
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
    }

/*  Structure   */
body {
    font-family: Helvetica Neue, Helvetica, Arial;
    background: white;
    color: #555;
}

header {
  width: 100%;
  overflow: auto;
  border-bottom: 1px solid black; 
}

/* Logo H1 */
header h1 {
  float: left;
}

header h1 a {
  display: block;
  text-decoration: none;
  margin-top: .5em;
  margin-left: 5.5em;
  width: 25%;
}

/* Navigation*/

nav {
  width: 75%;
  overflow: auto;
}

ul {
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 20em;

}

ul li {
  float: left;
}

ul li a {
  display: block;
  text-decoration: none;
  margin: 5px;
  margin-top: 1.5em;
  padding: 2px;
  font-size: 1.2em;
}

ul li a:hover {
  border-bottom: 1px solid #6FC36E;
}
/* Content*/
section {
  text-align: center;
  margin: 0.625em auto;
  overflow: auto;
}

section h2 {
  margin-top: 1em;
  margin-bottom: 1em;
}

section img {
  max-width: 100%;
}

.first {
  width: 45%;
  float: left;
  margin-left: 2%;
}

.first figure {
  width: 75%;
}

.second {
  width: 45%;
  float: left;
  margin-left: 2%;
}

.second figure {
  width: 75%;
}


/* Footer*/
footer {
  clear: both;
  text-align: center;
}

Answer 1

此答案仅解决您导航时遇到的问题。

我会从您的css中删除ul中的以下属性。

float: right;
margin-right: 20em;

您无需将菜单浮动到右侧，边距会减少菜单的可用空间。您在CSS中设置的75％宽度应足以限制菜单大小。

导航的唯一包装是当导航的宽度小于菜单中元素的宽度时。如果要防止这种情况，可以放大导航的宽度或采取不同的方法。

希望这有帮助。

在调整浏览器窗口大小时，标题会分开

1 个答案: