我正在为我的角色扮演小组建立一个小型网站，并且非常高兴能够弄清楚如何创建一个垂直导航栏，但我注意到在每个显示器上，文字都会掉落背后。
有没有办法设置文本的开始位置和导航结束？
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>
答案 0 :(得分：0)
“文本落后于导航”的原因是：ul元素的位置为fixed，这使得它与文档分离（移动到另一层并且不占用页面中的任何空间） ）。因此，文本占据了所有页面空间，其中一部分落后于ul。
由于有充分理由，您可能需要fixed ul，以下代码仅添加一条css规则 - 为文本定义左边距，为ul元素显示留出空间：< / p>
.Head, .Welcome {
padding-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"
}
.Head, .Welcome {
padding-left: 200px;
}<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>
答案 1 :(得分：0)
首先，我建议您修改代码并对其结构进行一些调整。看起来有很多缺失的标签（我试图在小提琴中纠正）。一个提示是为您的结束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>