資訊專欄INFORMATION COLUMN
摘要：元素通常用來創(chuàng)建一個描述列表，但是在我使用的過程中發(fā)現(xiàn)了一個小問題。元素有兩個特有的子元素，分別是和，用于在一個定義列表中聲明一個術(shù)語，用來指明一個描述列表元素中一個術(shù)語的描述。
dl元素通常用來創(chuàng)建一個描述列表，但是在我使用的過程中發(fā)現(xiàn)了一個小問題。定義及用法
在MDN中 元素的定義是：一個包含術(shù)語定義以及描述的列表，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對列表)。
元素有兩個特有的子元素，分別是 和 ， 用于在一個定義列表中聲明一個術(shù)語 ， 用來指明一個描述列表 (
) 元素中一個術(shù)語的描述。
這樣我們就得到了一個包含術(shù)語及其描述的列表：
在上面的展示中， 元素有其默認(rèn)的樣式，但是我的頁面上想要展示如下所示的列表：
于是，我就給 列表添加了一些CSS樣式：
dl {
width: 400px;
border: 1px solid red;
box-sizing: border-box;
display: inline-block;
}
dt, dd {
margin: 0;
padding: 0;
float: left;
width: 50%;
}
問題
結(jié)果呢，就出現(xiàn)了文章開頭時所說的小問題：
描述列表的樣式完全亂了，列表的第一行好像還可以，在第二行的 之前出現(xiàn)了莫明其妙的空白，所后的幾行也都出現(xiàn)了問題，這是為什么呢？
我們使用「border大法」來看一看到底為什么出現(xiàn)了這種情況，我為 元素中的所有元素都添加了 border ，并且稍微修改了 和 的寬度。
dl {
width: 400px;
}
dt, dd {
margin: 0;
padding: 0;
float: left;
width: 49%;
border: 1px solid red;
}
出現(xiàn)的結(jié)果是這樣的：
想必大家都看到了，定義術(shù)語的 元素和描述術(shù)語的 元素的高度不同，因此第二行的郵箱就被擠到了 元素本來的位置上，其后的元素也被依次擠了下去。
解決造成這個問題的原因是 和 自適應(yīng)高度，而純數(shù)字的 高度要低于漢字內(nèi)容的 ，因此有兩種方法解決：
1 .既然純數(shù)字的高度和帶漢字的文本的高度不同，那我們在兩邊都加上漢字不就行了嘛：
完美～
講道理，皮這一下很開心...
2 .正常人都不會用上邊的方法的好嗎，不慌，還有一種方法：給兩邊固定的高度。
dl {
width: 400px;
}
dt, dd {
font-size: 16px;
padding: 0;
margin: 0;
float: left;
width: 49%;
border: 1px solid red;
height: 30px;
line-height: 30px;
}
給兩邊都加上30px的高度，并且將行高設(shè)置為與高度相同，使文本垂直居中。
如果各位同學(xué)還有更好的解決方法，還請不吝賜教。
以上。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/51712.html
摘要：站點前端開發(fā)文檔原文元素原文語義化標(biāo)簽元素元素分類塊級元素自身屬性為的元素，通常使用塊級元素進行布局結(jié)構(gòu)的搭建?？梢院?，，等其他標(biāo)簽結(jié)合使用，表示文檔結(jié)構(gòu)。表示標(biāo)簽內(nèi)容之外的，與標(biāo)簽內(nèi)容相關(guān)的輔助信息，元素被用于無關(guān)內(nèi)容。 站點：前端開發(fā)文檔原文：HTML元素原文：語義化標(biāo)簽 HTML元素 元素分類 塊級元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、d...
摘要：元素的特性全稱為，中文為塊級格式化上下文。應(yīng)用之利用特性解決塌陷問題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個垂直排列的元素，一設(shè)置個，另一個設(shè)置，此時兩個元素的就會發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...
摘要：元素的特性全稱為，中文為塊級格式化上下文。應(yīng)用之利用特性解決塌陷問題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個垂直排列的元素，一設(shè)置個，另一個設(shè)置，此時兩個元素的就會發(fā)生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...
摘要：在我們寫代碼的過程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。不到萬不得已，盡量少使用或在可控范圍內(nèi)使用?？梢栽诳s小瀏覽器窗口時等比例縮放。但此時不能加左右的，否則總寬度會超過的寬度。我們?yōu)檫_(dá)到目的讓同一類和左右排布不同類上下排布。 在我們寫CSS代碼的過程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。 1. 一般特定的元素都有自己默認(rèn)的樣式，但是在我們的整體布局中，可能適得其反。我們可以去掉其默認(rèn)樣式。 ...
閱讀 3220·2021-11-22 13:54
閱讀 3541·2021-11-15 11:37
閱讀 3680·2021-10-14 09:43
閱讀 3583·2021-09-09 11:52
閱讀 3704·2019-08-30 15:53
閱讀 2539·2019-08-30 13:50
閱讀 2133·2019-08-30 11:07
閱讀 938·2019-08-29 16:32
