css - 调整浏览器窗口大小时标题分开-6ren

css - 调整浏览器窗口大小时标题分开

转载作者：行者123 更新时间：2023-11-28 10:22:09

28

4

我有一个简单的页面，其中包含一个 header 元素，该元素由嵌套在 h1 元素中的 anchor 标记内的 Logo 图像和具有 4 个链接的 nav 元素组成。在它下面我有两个元素，每个元素都包含一个图像和一个文本。我想知道为什么当我调整浏览器窗口大小时我的标题会分开，为什么文本没有环绕在他们尊重的图像周围并落在他们的右边。我还注意到，当我将鼠标悬停在 Logo 上时，有一个小区域，它仍然是一个不应该出现的链接。我真的很感谢这里的任何帮助，因为我希望了解 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;
}

最佳答案

此答案仅解决您在导航方面遇到的问题。

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

float: right;
margin-right: 20em;

您不需要将菜单向右浮动，边距会减少菜单的可用空间。您在 CSS 中设置的 75% 宽度应该足以限制您的菜单大小。

唯一会发生的导航换行是当导航的宽度小于菜单中元素的宽度时。如果你想防止这种情况，你可以扩大导航的宽度或采取不同的方法。

希望这对您有所帮助。

关于css - 调整浏览器窗口大小时标题分开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23940716/

28

4

0

文章推荐： jquery - 协助 z 索引导致各种错误

文章推荐： css - float :left prevents click on tag

文章推荐： javascript - 添加的函数

ios - 与 ","分开？
我像那样遍历数组。 NSArray *array = [[currentRaum raumattribute] allObjects]; NSString *compositeString =
python - 查找重复的字符(分开)
我想找到所有引用这种模式的子字符串:一些字符+一些字符+第一个字符。现在我在 Python 2.7 中有了这个: T = "i was here" m = re.findall(r"([a-z])[a
r - 使用不同长度的向量与 tidyr 分开
我想使用与 tidyr 分开将一列字符串(例如 [1, 58, 10] )分成几列。我的问题是有时列较短(永远不会更长)。我在同一个数据框中有很多列有这个问题。加载包 require(tidyr)
qt - 将数据处理与 GUI 分开
我正在开发一个具有图形用户界面的网络测试工具。我现在面临的问题是，我无法将基础数据与 GUI 类分开。该应用程序由一个 QMainWindow 组成，它随后生成多个其他 QDialogs 并具有一些
unix - 将策略与机制 : What does it mean? 分开
我经常听到“策略与机制分离”的口头禅，尤其是在 Unix 哲学的背景下。这是什么意思，有哪些具体的例子？什么时候/为什么是/不是一件好事？最佳答案它基本上是将需求或业务功能与技术实现分离。机制是技
cocoa - 将文件名与文件扩展名 Cocoa 分开？
我正在使用 writeToFile:atomically: 方法将一些加密数据写入文本文件。问题是，需要保存的文件必须是用户加密的文件，并带有我选择的扩展名。这是我到目前为止所拥有的: [encryp
rust - 试图把 rust 分开
我有这串 abcdef x y z 或这个 "ab cd ef" x y z 我正试图将其解析为 s1 = "abcdef" arr = ["x","y","z"] 或者 s1 = "ab cd e
javascript - 我是否需要将每个页面的 javascript 分开？
这个问题已经有答案了: One big javascript file or multiple smaller files? [duplicate] (7 个回答) 已关闭 6 年前。我有 4 种类
angularjs - 将模型与 Controller 分开
我有这样的事情 - function DetailCtrl($scope) { $scope.persons = [{ id: 1, name: "Mark"
javascript - 使用应用程序脚本在谷歌电子表格中拆分(分开)合并表格单元格
在操作(复制/移动)包含合并单元格的范围时，我总是收到错误消息“您的粘贴与合并单元格重叠。请取消合并单元格，然后重试”。但是，当尝试使用 Range#breakApart 取消合并范围内的单元格时，我
ios - 据说通过编辑副本将被污染的 NSArray 分开
我有一个包含一些 TextFields 的 TableView。所述 TextFields 的值链接到二维数组(NSMutableArrays 的 NSArray)中的某些位置。一个初始的干净数组定
css - 如何将标签文本分别与 div 分开？
我定义了一个标签，其中一半需要在左侧，另一半文本需要在右侧。我怎样才能解决这个问题，让另一半拉对？我添加了 margin-right 以使文本向右拉，但它与其他 div 不一致。
javascript - 创建正则表达式以将每个单词与分开。 (点)
我正在尝试创建一个正则表达式来将 JavaScript 中的每个单词与 .(点)分开。 function myFunction() { var url = "in.k1.k2.k3.k4.com"
html - 正文和背景部分使用 CSS 分开
如何使用 CSS 将网站的正文/内容区域与背景分开。为了向您展示我的意思，请看附图。因此，两侧的背景将扩展到拥有超大显示器的人，但内容将始终保持相同大小。谢谢，阿马尔 http://i.imgur.
html - 两张背景图片对 Angular 分开
有可能用 CSS 将两个背景图像对 Angular 分开吗？我知道如何只用一张图片制作它，但我不能用两张图片制作它。这是一个例子: |-------------| | /|
html - 如何将连接在一起的两个多列 `
` 分开？
这是一个JSFiddle我创建了展示代码的外观。我将如何给予这些它们之间是否存在间隙，没有一个元素低于另一个元素？ .main-content { width: 50%; float: le
python - 如何将周一至周五与周六和周日 Pandas 分开？
我正在处理具有这样数据的项目(我使用带有 python 的 pandas 框架): days rain 0 1 2 0 3 1 1
c - 将不同类型的参数与 va_list 分开
我正在尝试编写一个宏来获取信息并将该信息发送到另一个函数，方法是将原始 va_list 拆分为字符串，然后从原始 va_list 生成另一个 va_list。下面是我的代码。调用宏 /* Usag
c# - 将键值与 LinQ 分开
我需要来自 SharedToDomains 和 SharedFromDomains 的键和值数据。我想打印这些值。 var LogResponse = DeserializeFromJson(sLog
ios - 我如何将我的网络代码与我的 ViewController 分开
我现在正在使用 Alamofire 来发出发布请求。我首先在 ViewController 中构建它并开始工作。但后来我试图通过在另一个 class 中构建它来分离它。我使用 singleton 并且

首页

博学

6Ren·AI

商城

css - 调整浏览器窗口大小时标题分开