資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在水平方向排列顯示元素？
本文將介紹如何在HTML中實現水平排列的顯示效果。這可以透過設定樣式中的“display: inline”屬性或使用表格行來輕鬆實現。本文將演示如何在網頁中將元素水平排列。首先，介紹瞭如何將無序列表項水平排列的方法。第二個例子演示瞭如何將段落文字水平排列。第三個例子則使用了不同大小的影像進行水平排列。
示例1：使用HTML將無序列表項水平排列
設計步驟
步驟1 − 建立一個HTML檔案並開始編寫程式碼。
步驟2 − 在<body>標籤內新增一個<center>標籤。
步驟3 − 在<center>標籤內，新增一個<div>標籤，並將其類名設定為“tab”。
步驟4 − 新增一個<style>標籤，併為.tab類指定樣式。
步驟5 − 使用淺色背景顏色，1px實線邊框和深色邊框顏色，寬度400px，高度50px。
步驟6 − 為<li>標籤設定樣式，使用“display: inline”屬性以及其他樣式。
步驟7 − 在div標籤內建立無序列表。在瀏覽器中開啟HTML檔案並檢視結果。
使用的檔案：HRowDisplay1.html
HRowDisplay1.html程式碼
<!DOCTYPE html>
<html>
<head>
<title>Display in a horizontal row</title>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 400px;
height: 50px;
}
li {
display: inline;
word-spacing: 25px;
}
</style>
</head>
<body>
<center>
<h2>Display List Items in a horizontal row</h2>
<div class="tab">
<ul>
<li>
Name:-Hina
</li>
<li>
Age:-40
</li>
<li>
Lives_in:-UP
</li>
</ul>
</div>
</center>
</body>
</html>
示例2：使用HTML將段落文字水平排列
設計步驟
步驟1 − 建立一個名為HRowDisplay2.html的檔案，然後在其中編寫程式碼。
步驟2 − 為居中顯示元素，在<body>標籤內新增一個<center>標籤。在<center>標籤內，新增一個<div>標籤作為容器。
步驟3 − 在<div>標籤內，建立一個<table>標籤，並將其類名設定為“tab”。
步驟4 − 使用<style>標籤建立一個類標籤來設定樣式，然後為.tab類指定樣式。
步驟5 − 使用十六進位制顏色程式碼#e0dbdb作為背景顏色，1px實線邊框和深色邊框顏色，寬度600px，高度50px。
步驟6 − 在div標籤之前建立四個段落標籤，並在這些標籤中寫入文字內容。
步驟7 − 建立一個<tr>標籤和四個<th>標籤，並將上述<p>標籤的副本分別放在每個<th>標籤中。
步驟8 − 在瀏覽器中開啟HTML檔案並檢視結果。
使用的檔案：HRowDisplay2.html
HRowDisplay2.html程式碼
<!DOCTYPE html>
<html>
<head>
<title>Display in a horizontal row</title>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 600px;
height: 50px;
}
</style>
</head>
<body>
<center>
<h2>Displaying Lines</h2>
<p>This is line One</p>
<p>This is line Two</p>
<p>This is line Three</p>
<p>This is line Four</p>
<div>
<h2>Display Lines in a horizontal row</h2>
<table class="tab">
<tr>
<th>
<p>This is line One</p>
</th>
<th>
<p>This is line Two</p>
</th>
<th>
<p>This is line Three</p>
</th>
<th>
<p>This is line Four</p>
</th>
</tr>
</table>
</div>
</center>
</body>
</html>
示例3：使用HTML將影像水平排列
步驟1 − 建立一個名為HRowDisplay3.html的檔案，並開始在該檔案中編寫程式碼。
步驟2 − 為居中顯示body標籤內的元素，新增一個<center>標籤。
步驟3 − 新增一個<div>標籤，並將其類名設定為“tab”。
步驟4 − 為.tab類設定樣式，為此新增一個<style>標籤。
步驟5 − 使用十六進位制顏色程式碼“#e0dbdb”作為背景顏色，1px實線邊框和深色邊框顏色，寬度80%，高度50%。
步驟6 − 為<img>標籤設定樣式，並使用“display: inline”屬性。
步驟7 − 在div標籤內放置<img>標籤，並使用不同大小的影像。在瀏覽器中開啟HTML檔案並檢視結果。
使用的檔案：HRowDisplay3.html
HRowDisplay3.html程式碼
<!DOCTYPE html>
<html>
<head>
<style>
.tab {
border: 1px solid #382d2d;
background-color: #e0dbdb;
width: 80%;
height: 50%;
}
img {
display: inline;
}
</style>
</head>
<body>
<div></div>
<body>
<center>
<h2>Display Images in a horizontal row</h2>
<div class="tab">
<img src="https://tutorialspoint.tw/assets/questions/media/14186/play.jpg" />
<img src="https://tutorialspoint.tw/assets/questions/media/14186/play.jpg" />
<img src="https://tutorialspoint.tw/assets/questions/media/14186/play.jpg" />
<img src="https://tutorialspoint.tw/assets/questions/media/14186/play.jpg" />
</div>
</center>
</body>
</html>
總結
本文透過三個不同的例子，介紹瞭如何在HTML中將網頁元素水平排列。第一個例子展示瞭如何將無序列表水平排列。第二個例子將段落文字放在表格的<th>標籤內，並水平排列。第三個例子使用了不同大小的影像進行水平排列。
717 次瀏覽
