html - 文本 "wrapping itself"且未按行显示-6ren

html - 文本 "wrapping itself"且未按行显示

转载作者：行者123 更新时间：2023-11-28 01:42:20

27

4

文本是“ self 包装”而不是按行显示。我曾尝试使用 p { display:in-line;} 但这没有做任何事情。几乎是一个接一个地出现在之前这个词的下方。我想知道为什么？请帮忙，谢谢! (我使用的是 google 之外的字体，但我不希望这会改变这种情况)

<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<header>
<div class="grow">
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="aboutme.html">About me</a></li>
  <li><a href="like.html">What I love</a></li>
</ul>
</div>
</header>
<h1>About Me<h1>
<p>Hi, welcome to my website. I am not sure why this is not working at the moment.</p>
</body>
</html>

------------------------------------另一个文件中的CSS------ ------------------------

body {
    background-image: url(magical.jpg);
}
h1 { font-family: 'Lobster', cursive;

    color: white;
    position: absolute;
    top: 200px;
    left: 630px;
    text-decoration: underline;
}
p { font-family: 'Lobster', cursive;
    font-size: 20px;
    color: white;
    position: absolute;
    top: 60px;
    right:350px;
    display: inline;

}
.grow {
    position: absolute;
    left: 550px;
    top: 700px;
}


a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}
ul {
    padding: 10px;
    background: #dcf3ff;
    border-width: 6px;
    border-style: solid;
    border-color: white;

}

li {
    display: inline;
    padding: 0px 15px 0px 15px;
    border-right: 2px solid black;
    border-left: 2px solid black;

}

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.7s;
  transition-duration: 0.7s;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.grow:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

最佳答案

您的 h1 标签没有正确关闭。变化:

<h1>About Me<h1>

到

<h1>About Me</h1>

jsfiddle

关于html - 文本 "wrapping itself"且未按行显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25188093/

27

4

0

文章推荐： javascript - 如何绑定(bind)本地存储数据中的值？

文章推荐： C++ 在表达式中组合运算符重载

文章推荐： javascript - 复选框 - jquery mobile 保守 secret

html - flex 盒/IE11 : flex-wrap: wrap does not wrap (Images + Codepen inside)
我创建了一个包含社交图标的列表。这些图标应该环绕在小屏幕上。我使用 flex-wrap: wrap; 它在 Firefox 和 Chrome 中完美运行: 但是 Internet Explorer
css - 哪些字符允许空格 : pre-wrap to wrap?
我很惊讶地发现我的 white-space: pre-wrap;文本在 > 换行和 "人物。我以为它只会换行，- , 以及一个或多个空格之后。这是一个fiddle . 它在" 之后换行, 在
html - flex-wrap:wrap;不能让他们工作
我被分配了重新创建以下网站的任务：https://plantanapp.com/learn 我做了一些事情，但是每次我解决一个问题时，都会出现另外两个问题。我是HTML和CSS的新手，并不真正了解元
javascript - jQuery wrap 函数 wrap 工作起来很奇怪
我偶然发现了 jQuery 的 wrap() 函数。当我试图包装两个 div 标签时，它们之间有一些文本，而不是两个 div 之间没有文本时，它的行为不知何故不同。 j查询: var wrapper
CSS Validator 无法识别 flex-wrap : wrap;
我正在尝试在 w3c css 验证器上验证一个 css 文件。当它被测试时，它返回一个错误，指出 “属性 flex-wrap- 不存在:wrap”。这是我 css 验证器认为错误的部分。 .row {
javascript - 如何使用 flex-wrap : wrap 去除行与行之间的空间
这个问题在这里已经有了答案: Flex items create space between them when they wrap [duplicate] (1 个回答) 关闭 6 年前。我正在
html - 你如何告诉浏览器 "if you need to wrap, wrap here first"？
我正在制作一个网页，其中的标题有一个主要主题和一个描述符，每个都包含在标签中。我已经查找了标签，它似乎只在你有长字符串时才有效没有空格。但是我在文本中断断续续地有空格。我需要的是我可以在两个元
wpf - WPF Wrap 面板以何种方式较慢，我们需要虚拟 wrap 面板
我听到很多关于 wrap 面板加载速度较慢的消息，因此我们需要一个虚拟化面板。有人可以给我一个小的环绕面板示例，它可以证明加载速度较慢等它需要一个虚拟面板。我设置了一个环绕面板作为列表框的面板控件
javascript - 类型错误 : Attempted to wrap getRepository which is already wrapped
我需要用 sinon 多次包装一个方法，以便能够根据参数返回不同的对象。我该怎么做？我要测试的 Controller 看起来像这样: const servicePackagesOfferingRep
testing - 诗农JS "Attempted to wrap ajax which is already wrapped"
我在运行测试时收到了上述错误消息。下面是我的代码(我正在使用 Backbone JS 和 Jasmine 进行测试)。有谁知道为什么会这样？ $(function() { describe("Ca
css - 如何使用 flex-wrap :wrap applied? 删除元素的子元素之间的空格
问题是关于.text-wrapper，它有display:flex; flex-wrap:wrap 应用于它。使用 flex-wrap:wrap 的原因是，否则 .text-wrapper 和 .ta
html - 为什么 flex-wrap : wrap not work on safari
我有三个带有 Bootstrap 3 的 DIV 容器，其中前两个在第一行，第三个在下一行，直到浏览器宽度直到 991 px。高于 992 px，所有三个容器应排成一行。每行容器的高度应该是最高的 (
css - 为什么 "flex-wrap: wrap"会中断 "align-items"？
(我使用的是 Chrome v.39+) 我正在尝试使用 flex-wrap 属性水平和垂直堆叠子 div，但我看到了一些非常奇怪的行为。例如，如果有 3 个子 div，最后一个的宽度为 100%(使
html - Flex-box 多行。如何使用: flex-wrap: wrap?
我必须这样做。适用于宽屏、中屏和小屏 https://pp.vk.me/c629328/v629328337/21bd7/izp9QG8Qcg4.jpg 这是我的代码 .section-items-c
html - 为什么不使用 flex-wrap :wrap? 将 flex 元素换行到第二行
我想要一个每行 3 个元素的容器 flex div，问题是当我添加第四个元素时(它应该自动换行到第二行)，而不是它停留在一行并缩小其他元素。我启用了 flex-wrap: wrap; 这是我的代码:
javascript - 带有 flex-wrap :wrap 的 flex 容器中的斑马条纹行
假设我正在使用一个带有 flex-direction:row 和 flex-wrap:wrap 的 flexbox 容器。根据浏览器窗口的大小，每行中可能有 2、3、4 或更多项。我想在每隔一行的
css - flex 包装 :wrap doesn't wrap when I am changing browser's width
我已经添加了所有属性。当我更改浏览器宽度时，它们开始相互粘连，这是因为我有太多图像而无法正常工作？无法将图像换行: #skills>div { margin-top: 80px; displ
html - 如何在没有 flex-wrap 的 ionic 框架中制作每行包含两个图像的图像网格 :wrap;
我想制作一个网格，其中每行有两张图片。我正在使用 flex-wrap: wrap;它在 android 4.4+ 上运行良好，但不适用于低于 android 4.4 的系统。我想在不使用 flex-w
php - wrap-function, wrap-raf, contextual-ee 附加在网页上
我的网站出现异常行为。我最近在网站管理员工具上发现，它发现我网站上的许多网页都出现抓取错误 404。我无法理解这些页面是如何创建的，因为所有 404 页面最后都包含这几个字 wrap-function
c# - 使用 MongoDB C# 驱动程序 : Wrapped or Un-Wrapped?
我正在使用 MongoDB C# 驱动程序构建一些更新语句。 The C# API在 Builder 命名空间中包括 Wrapped 和“Un-Wrapped”方法。从表面上看，这些似乎因泛型不同而

首页

博学

6Ren·AI

商城

html - 文本 "wrapping itself"且未按行显示