css - 垂直导航背后的 HTML 文本换行-6ren

css - 垂直导航背后的 HTML 文本换行

转载作者：行者123 更新时间：2023-11-28 04:00:12

我正在为我的 Roleplay 小组构建一个小型网站，并且很高兴弄清楚如何创建垂直导航栏，但我注意到在每个显示器上，文本都落后于它。

有没有办法设置文本开始和导航结束的位置？

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #d9d9d9;
  height: 100%;
  position: fixed;
  display: inline-block;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  font-family: "Arial"
}

.active {
  background-color: #990000;
  color: white;
}

li a:hover {
  background-color: #990000 color: white;
}

#titletext {
  text-align: center;
  font-family: "Arial";
  font-size: 52;
}

#welcome {
  text-align: center;
  font-family: "Arial"
}

#intro {
  text-align: center;
  font-family: "Arial"
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
  <title>FFXIV RP Database</title>
  <style>
    div.head {
      background-color: #000000;
      color: white;
      text-decoration: none;
      margin: 5px 0 5px 0;
      padding: 20px;
    }
  </style>
</head>

<body>
  <!--NAVIGATION BAR-->
  <div class="Navigation">
    <ul>
      <li id="first"><img src="xiv logo.png" width="200px"></li>
      <li><a href="1.html" class="active">Home</a></li>
      <li><a href="2.html">Characters</a></li>
      <li><a href="3.html">Story</a></li>
      <li><a href="4.html">Stats</a></li>
      <li><a href=".html">Contact</a>
        <li>
    </ul>
  </div>
  <!--HEADER-->
  <div class="Head">
    <h1 id="titletext">FFXIV RP Database</h1>
  </div>
  <!--BELOW HEAD CONTENT-->
  <div class="Welcome">
    <p>
      <h2 id="welcome">Welcome to Eorzea!</h2>
      <div style="text-align:center;">
        <img src="group.png" width="40%">
      </div>
      <div class="IntroParagraph" style="text-align:center;" id="Intro">
        <p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
          <br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
          <br/>
          <b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
          and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
          its scalding heat.</p>
        <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
        <!--WRITE-UP: "EORZEA"-->
        <div class="Welcome">
          <p>
            <h2 id="welcome">City-States of Eorzea</h2>
            <div style="text-align:left;">
              <img src="eorzea.jpg" width="40%">
              <p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
              <ol type="I">
                <li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
                <li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,
                  its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
                <li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls. Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the
                  wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
                <li>
            </div>
          </p>
</body>

</html>

最佳答案

首先，我建议固定您的代码并对结构进行一些调整。看起来有很多缺少的标签(我试图在 fiddle 中更正)。一个技巧是在关闭的 div 标记中添加注释，这样您就可以看到每个部分的结束位置。

话虽如此，您可以将 margin-left: 200px; 应用于您的 .Welcome 类，以便将所有内容从这一页。由于 200px 是固定 navigation 的宽度，您需要补偿该宽度。由于您的 Welcome 类包装了您的 body 内容，因此您需要为此类添加边距

https://fiddle.jshell.net/kez8aLam/

.Welcome {
  margin-left: 200px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #d9d9d9;
  height: 100%;
  position: fixed;
  display: inline-block;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  font-family: "Arial"
}

.active {
  background-color: #990000;
  color: white;
}

li a:hover {
  background-color: #990000 color: white;
}

#titletext {
  text-align: center;
  font-family: "Arial";
  font-size: 52;
}

#welcome {
  text-align: center;
  font-family: "Arial";
}

#intro {
  text-align: center;
  font-family: "Arial"
}

<div class="home-wrap">

  <div class="Navigation">
    <ul>
      <li id="first"><img src="xiv logo.png" width="200px"></li>
      <li><a href="1.html" class="active">Home</a></li>
      <li><a href="2.html">Characters</a></li>
      <li><a href="3.html">Story</a></li>
      <li><a href="4.html">Stats</a></li>
      <li><a href=".html">Contact</a>
        <li>
    </ul>
  </div>
  <!--HEADER-->
  <div class="Head">
    <h1 id="titletext">FFXIV RP Database</h1>
  </div>
  <!--BELOW HEAD CONTENT-->
  <div class="Welcome">
    <p>
      <h2 id="welcome">Welcome to Eorzea!</h2>
      <div style="text-align:center;">
        <img src="group.png" width="40%">
      </div>
      <div class="IntroParagraph" style="text-align:center;" id="Intro">
        <p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
          <br/><b>Orrick Ballard (Explorer and Map-Maker)</b>
          <br/>
          <br/>
          <b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
          and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
          its scalding heat.</p>
        <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
      </div>
      </div>
      </div>
      <!--WRITE-UP: "EORZEA"-->
      <div class="Welcome">
        <p>
          <h2 id="welcome">City-States of Eorzea</h2>
          <div style="text-align:left;">
            <img src="eorzea.jpg" width="40%">
            <p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
            <ol type="I">
              <li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
              <li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,its
                resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
              <li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
                <li>Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
            </ol>        
        </div>
        </div>

关于css - 垂直导航背后的 HTML 文本换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43256055/

文章推荐： css - 在 p 元素旁边放置 span 的内部 div

文章推荐： css - Bootstrap2 Navbar 和下方行之间的神秘空白

文章推荐： javascript - 正确触发 onmouseup 元素

文章推荐： javascript - ajax查询将对象键值更改为索引

reactjs - 将带有标签的输入与没有标签的按钮对齐(垂直)
我想对齐输入，它有两个标签和一个没有任何标签的按钮，以便它们都在同一级别。这是期望的效果: 这是我到目前为止得到的: 我通过在按钮前添加带有空白空间的标签，设法让它看起来像我想要的样子，但这并不理想
JavaFX - 垂直 Accordion
您好，我有一个关于 JavaFX 的问题。我担心答案是剥皮，我对此一无所知，但这里是。我想在 JavaFX 中制作 Accordion/TabPane 交叉。我将尝试用文字解释自己，但在下面我已经包
c - 垂直/水平翻转二维数组
这可能被认为是一个低俗的问题。然而，我还没有找到任何代码，也没有找到任何讨论如何用我的编程语言 C 来解决这个问题的论坛。已经进行了大量的尝试，并且最终都以实际上“硬编码”新数组而告终。我正在尝试垂
Java(垂直)调整随机间隙的大小
我有以下代码: public Frame() { super(); setVisible(true); setDefaultCloseOperation(JFrame.EXIT
iphone - UIModalTransitionStyleFlipHorizontal 垂直？
是否可以将 UIModalTransitionStyleFlipHorizontal 修改为垂直而不是水平？我通常会使用 CATransition 来执行此操作，但该方法需要将一个 UIView
ios自定义导航(垂直)建议
我有一个 ios5 导航的想法，我正在一个应用程序上做，我认为从 SOF 那里得到一些关于我的想法的建设性批评是明智的。 p> 想法: UIView 包含 6 个左右垂直堆叠的按钮 UIButtons
iphone - 垂直 UIScrollView？
我正在努力进行一些 iOS 开发，我希望有人能够帮助我提出建议。我想实现一堆看起来像一副纸牌的 UIView。用户应该能够通过触摸刷出“卡片”。我想到了带有 pagingEnabled 的 UIScr
html - 工作台居中(垂直)
我想创建一个包含四张图片的入口页面作为指向其他页面的链接。但我希望这些图片显示在显示器的中间(垂直和水平)。我已经尝试了很多事情，但我做对了。我什至无法以任何方式垂直对齐图片(例如底部，您将在代码中看
javascript - 重写伪元素水平。垂直
我有代码在 div 的底部创建一个元素作为向下的“箭头/指针”。我需要这样写，以便“箭头/指针”指向左侧当前代码 - HTML 掩码 css 在 fiddle 中 https://j
javascript - 如何将焦点集中的div居中？ [垂直]
下面的代码将焦点放在中间的 div 上，但该 div 出现在窗口的底部。如何使该 div 居中，使其显示在窗口的中心[垂直]，而不设置固定位置。 $(function(){ $("#focus
html - 无法将单选按钮对齐到中心(垂直)
这个问题在这里已经有了答案: Vertical Align Center in Bootstrap 4 [duplicate] (20 个答案) 关闭 4 年前。我创建了一个由两列组成的结构，第一
jquery slider 垂直
演示:http://jsfiddle.net/vpH8r/2/ 我在上面创建了一个 jfiddle，试图让垂直滑动正常工作。当前的问题是 slider 标签不会移动，并且不会出现从顶部到底部的干净滑
Javascript 垂直 slider
我正在尝试在 javascript 中创建一个垂直 slider 小部件。我不是在寻找任何插件或库，我正在尝试查看如何使用纯 javascript 完成它。我想我大概明白了。请在此处查看到目前为止已
html - 在导航列表中居中图像(垂直)
我正在尝试创建一个响应式导航列表，并将图像置于页面列表的中心我已经设法接近那个，但是图像比列表更靠前。我想像这样得到它，但似乎无法弄清楚。任何帮助将不胜感激! 代码:https://jsfidd
html - 居中导航栏 - 垂直
有人可以帮我将导航栏居中，使其在页面上垂直居中吗？我希望导航栏中央的链接位于顶部，而不是像现在这样向左浮动。提前致谢 Toggle navigation
Javascript 垂直、水平缩放图像和变换图像位置
我想垂直、水平转换图像，并使用 javascript 缩放图像。目前我设法使调整大小的图像起作用，但它看起来不正确。我正在尝试使用类似于 Transform image 的东西.调整垂直移动条时，图像
html - 转动水平面包屑导航，垂直
这可能是一个问题，但要求太多，但我已经达到了我的极限。我有这段 ( http://jsfiddle.net/3whTa/) CSS，它创建了一个箭头水平面包屑导航。我想做的是将其转换为垂直。就像箭
c++ - 为什么成像操作在opencv中执行到图像的一半(垂直)
我正在使用 opencv 进行非常简单的操作，但我无法理解为什么会出现此错误/问题。图像被操作到图像的一半(垂直)。 Mat img = imread("/Users/tanmoy/Documents
html - 垂直/水平居中伪元素的生成内容
我想知道是否有人有任何技术来定位 css 生成的内容。例如: .block { height: 150px; width: 150px; border: 1px solid black;
Android:垂直 ViewPager
关闭。这个问题需要更多 focused .它目前不接受答案。想要改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭3年前。 Improve this que

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 垂直导航背后的 HTML 文本换行