HTML5 및 CSS 스타일 시트의 새로운 기능입니다. 저는 롤 플레잉 그룹을위한 작은 웹 사이트를 구축하는 과정에 있으며 수직 탐색 모음을 만드는 방법을 알아내는 데 너무 기뻤습니다. 하지만 모든 디스플레이에서 텍스트가 뒤 떨어진다는 것을 알고 있습니다. 텍스트가 시작되고 탐색이 끝나는 위치를 설정하는 방법이 있는지 궁금합니다. 감사!세로 텍스트 뒤에 배치되는 HTML 텍스트
ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t width: 200px;
\t background-color: #d9d9d9;
\t height: 100%;
\t position: fixed;
\t display: inline-block;
}
li {
\t text-align: center;
\t border-bottom: 1px solid #555;
}
\t
li a {
\t display: block;
\t color: #000;
\t padding: 8px 16px;
\t text-decoration: none;
\t font-family: "Arial"
}
.active {
\t background-color: #990000;
\t color: white;
}
li a:hover {
\t background-color: #990000
\t color: white;
}
#titletext {
\t text-align: center;
\t font-family: "Arial";
\t font-size: 52;
}
#welcome {
\t text-align: center;
\t font-family: "Arial"
}
#intro {
\t text-align:center;
\t font-family: "Arial"
}
<html>
\t <head>
\t \t <link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
\t \t <title>FFXIV RP Database</title>
\t \t <style>
\t \t \t div.head {
\t \t \t \t background-color: #000000;
\t \t \t \t color: white;
\t \t \t \t text-decoration: none;
\t \t \t \t margin: 5px 0 5px 0;
\t \t \t \t padding: 20px;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
<!--NAVIGATION BAR-->
\t \t <div class="Navigation">
\t \t \t <ul>
\t \t \t \t <li id="first"><img src="xiv logo.png" width="200px"></li>
\t \t \t \t <li><a href="1.html" class="active">Home</a></li>
\t \t \t \t <li><a href="2.html">Characters</a></li>
\t \t \t \t <li><a href="3.html">Story</a></li>
\t \t \t \t <li><a href="4.html">Stats</a></li>
\t \t \t \t <li><a href=".html">Contact</a><li>
\t \t \t </ul>
\t \t </div>
<!--HEADER-->
\t \t <div class="Head">
\t \t \t <h1 id="titletext">FFXIV RP Database</h1>
\t \t </div>
<!--BELOW HEAD CONTENT-->
\t \t <div class="Welcome">
\t \t \t <p>
\t \t \t \t <h2 id="welcome">Welcome to Eorzea!</h2>
\t \t \t \t <div style="text-align:center;">
\t \t \t \t \t <img src="group.png" width="40%">
\t \t \t \t </div>
\t \t \t \t <div class="IntroParagraph" style="text-align:center;" id="Intro">
\t \t \t \t \t <p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
\t \t \t \t \t <br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
\t \t \t \t \t <br/>
\t \t \t \t \t <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
\t \t \t \t \t outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones
\t \t \t \t \t 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
\t \t \t \t \t South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p>
\t \t \t \t \t <p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the
\t \t \t \t \t very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
\t \t <div class="Welcome">
\t \t \t \t <p>
\t \t \t \t \t <h2 id="welcome">City-States of Eorzea</h2>
\t \t \t \t \t <div style="text-align:left;">
\t \t \t \t \t \t <img src="eorzea.jpg" width="40%">
\t \t \t \t \t \t <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>
\t \t \t \t \t \t \t <ol type="I">
\t \t \t \t \t \t \t \t <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>
\t \t \t \t \t \t \t \t <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.
\t \t \t \t \t \t \t \t 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>
\t \t \t \t \t \t \t \t <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.
\t \t \t \t \t \t \t \t 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
\t \t \t \t \t \t \t \t to determine the fate of the city’s citizens. </li>
\t \t \t \t \t \t \t \t <li>
\t \t \t \t </div>
\t \t \t </p>
\t </body>
</html>