資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使 HTML <dt> 和 <dd> 元素保持在同一行
HTML 描述列表 或定義列表 <dl> 以字典格式顯示元素。<dt> 和 <dd> 標籤在 HTML 中與 <dl> 標籤一起使用來定義術語或給出其描述。在一個父定義列表中，<dd> 元素用於將定義描述與包含在 <dt> 標籤中的同級定義術語配對。
示例
讓我們看看一個簡單的描述列表的示例。
<!DOCTYPE html> <html> <head> <title>Example of a description list</title> </head> <body> <p style="font-size:20px">A data definition list</p> <dl> <dt>Data term 1</dt> <dd>Data definition 1</dd> <dt>Data term 2</dt> <dd>Data definition 2</dd> <dt>Data term 3</dt> <dd>Data definition 3</dd> <dt>Data term 4</dt> <dd>Data definition 4</dd> </dl> </body> </html>
預設情況下，<dt> 和 <dd> 元素不會顯示在同一行。在本段程式碼中，我們將討論一些使用某些 CSS 屬性的方法，以強制 <dt> 及其對應的 <dd> 元素保持在同一行。
使用 CSS float 屬性
float 屬性用於內容定位和格式化。它用於將元素定位到其容器的左側和右側，以及允許文字和內聯元素環繞它。它定義了頁面的內容流。
如果一個元素從內容的正常流中移除，則其餘元素將包含在流中。絕對定位的元素會忽略此屬性。它可以寫在 CSS 檔案中，也可以直接指定在元素的樣式中。
語法
以下是語法：
float: none|left|right;
其中，
none: 指定元素不浮動。這是預設設定。
left: 指定元素浮動在容器的左側。
right: 指定元素浮動在容器的右側。
示例
在這個示例中，我們使用 CSS float 屬性的 left 值，並使用百分比作為 width 屬性，以使 <dt> 和 <dd> 並排顯示。
<!DOCTYPE html>
<html>
<head>
<title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
<style>
dl {
background:lightpink;
width: 100%;
overflow: hidden;
}
dt {
background:lavenderblush;
float: left;
width: 50%;
}
dd {
background:lavenderblush;
float: left;
width: 50%;
margin:0;
}
</style>
</head>
<body>
<dl>
<dt>Data term 1</dt>
<dd>
This line contains the definition for the data term 1.
</dd>
<dt>Data term 2</dt>
<dd>
This line contains the definition for the data term 2.
</dd>
</dl>
</body>
</html>
使用 ::after 偽元素
在 CSS 中，::after 建立一個偽元素，它是所選元素的最後一個子元素。它是一個生成的 content 元素，它可以用於插入任何型別的 content，例如字元、文字字串和影像。content 屬性確定其值。它預設情況下為內聯，並且像所有其他 content 一樣，它可以被動畫化、定位和浮動。
示例
在下面的示例中，我們使用 clear 屬性與 float 屬性一起使用，並在 <dt> 元素上新增 ::after 偽元素。
<!DOCTYPE html>
<html>
<head>
<title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
<style>
dl {
width:300px;
border: 2px solid saddlebrown;
padding:10px;
}
dt {
float: left;
clear: left;
width: 80px;
text-align: left;
}
dt::after {
content: " - ";
}
</style>
</head>
<body>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
</body>
</html>
使用 Flexbox
Flexbox 是一種一維佈局方法，允許使用者將專案排列成行或列。它擅長獲取各種大小的專案集合，併為這些專案返回最佳佈局。Flexbox 允許您提供靈活的邊界來暗示 content 可能如何顯示，而不是為瀏覽器提供需要遵循的嚴格維度。
Flex 容器屬性為
flex-direction: 定義容器希望如何堆疊 Flex 專案的方向。
flex-wrap: 指定是否應換行 Flex 專案。
flex-flow: 它是上述兩個屬性的簡寫屬性。
justify-content: 用於對齊 Flex 專案。
align-items: 用於對齊 Flex 專案。
align-content: 用於對齊 Flex 行。
Flex 專案屬性為
order: 指定 Flex 專案的順序。
flex-grow: 指定 Flex 專案相對於其他 Flex 專案的增長程度。
flex-shrink: 指定 Flex 專案相對於其他 Flex 專案的收縮程度。
flex-basis: 指定 Flex 專案的預設長度。
flex: 它是上述三個屬性的簡寫屬性。
align-self: 指定所選專案在彈性容器內的對齊方式。
示例
在以下示例中，我們為 <dl> 元素添加了帶有“row wrap”值的 flex-flow 屬性。我們還為 <dt> 和 <dd> 元素指定了 flex-basis 屬性，併為 <dd> 元素指定了 flex-grow 屬性。
<!DOCTYPE html>
<html>
<head>
<title>How to Make HTML <dt> and <dd> Elements Stay on the Same Line</title>
<style>
dl {
width:250px;
display: flex;
flex-flow: row wrap;
border: 2px solid purple;
}
dt {
flex-basis: 20%;
padding: 2px 5px;
background:indigo ;
text-align: center;
color: #fff;
}
dd {
flex-basis: 70%;
flex-grow: 1;
margin: 0;
text-align: center;
padding: 2px 5px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
</body>
</html>
955 次瀏覽
