成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

HTML中dl元素的高度問(wèn)題

Lowky / 1600人閱讀

摘要：元素通常用來(lái)創(chuàng)建一個(gè)描述列表，但是在我使用的過(guò)程中發(fā)現(xiàn)了一個(gè)小問(wèn)題。元素有兩個(gè)特有的子元素，分別是和，用于在一個(gè)定義列表中聲明一個(gè)術(shù)語(yǔ)，用來(lái)指明一個(gè)描述列表元素中一個(gè)術(shù)語(yǔ)的描述。

dl元素通常用來(lái)創(chuàng)建一個(gè)描述列表，但是在我使用的過(guò)程中發(fā)現(xiàn)了一個(gè)小問(wèn)題。
定義及用法

在MDN中

元素的定義是：一個(gè)包含術(shù)語(yǔ)定義以及描述的列表，通常用于展示詞匯表或者元數(shù)據(jù) (鍵-值對(duì)列表)。
元素有兩個(gè)特有的子元素，分別是
和
，
用于在一個(gè)定義列表中聲明一個(gè)術(shù)語(yǔ) ，
用來(lái)指明一個(gè)描述列表 (
) 元素中一個(gè)術(shù)語(yǔ)的描述。


    
Name
    
    
Godzilla

    
Born

    
1952

    
Birthplace

    
Japan

    
Color

    
Green

這樣我們就得到了一個(gè)包含術(shù)語(yǔ)及其描述的列表：

給
元素添加樣式

在上面的展示中，

元素有其默認(rèn)的樣式，但是我的頁(yè)面上想要展示如下所示的列表：

于是，我就給

列表添加了一些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%;
}
問(wèn)題

結(jié)果呢，就出現(xiàn)了文章開(kāi)頭時(shí)所說(shuō)的小問(wèn)題：

描述列表的樣式完全亂了，列表的第一行好像還可以，在第二行的

之前出現(xiàn)了莫明其妙的空白，所后的幾行也都出現(xiàn)了問(wèn)題，這是為什么呢？
我們使用「border大法」來(lái)看一看到底為什么出現(xiàn)了這種情況，我為
元素中的所有元素都添加了 border ，并且稍微修改了
和
的寬度。

dl {
  width: 400px;
}
dt, dd {
  margin: 0;
  padding: 0;
  float: left;
  width: 49%;
  border: 1px solid red;
}

出現(xiàn)的結(jié)果是這樣的：

想必大家都看到了，定義術(shù)語(yǔ)的

元素和描述術(shù)語(yǔ)的
元素的高度不同，因此第二行的郵箱就被擠到了
元素本來(lái)的位置上，其后的元素也被依次擠了下去。

解決

造成這個(gè)問(wèn)題的原因是

和
自適應(yīng)高度，而純數(shù)字的
高度要低于漢字內(nèi)容的
，因此有兩種方法解決：
1 .既然純數(shù)字的高度和帶漢字的文本的高度不同，那我們?cè)趦蛇叾技由蠞h字不就行了嘛：

完美～
講道理，皮這一下很開(kāi)心...

2 .正常人都不會(huì)用上邊的方法的好嗎，不慌，還有一種方法：給兩邊固定的高度。

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é)還有更好的解決方法，還請(qǐng)不吝賜教。
以上。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51712.html

相關(guān)文章

  • HTML5元素和語(yǔ)義化標(biāo)簽

    摘要：站點(diǎn)前端開(kāi)發(fā)文檔原文元素原文語(yǔ)義化標(biāo)簽元素元素分類(lèi)塊級(jí)元素自身屬性為的元素，通常使用塊級(jí)元素進(jìn)行布局結(jié)構(gòu)的搭建?？梢院?，，等其他標(biāo)簽結(jié)合使用，表示文檔結(jié)構(gòu)。表示標(biāo)簽內(nèi)容之外的，與標(biāo)簽內(nèi)容相關(guān)的輔助信息，元素被用于無(wú)關(guān)內(nèi)容。 站點(diǎn)：前端開(kāi)發(fā)文檔原文：HTML元素原文：語(yǔ)義化標(biāo)簽 HTML元素 元素分類(lèi) 塊級(jí)元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、d...

    caspar 評(píng)論0 收藏0

  • CSS BFC特性(塊級(jí)格式化上下文)

    摘要：元素的特性全稱(chēng)為，中文為塊級(jí)格式化上下文。應(yīng)用之利用特性解決塌陷問(wèn)題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個(gè)垂直排列的元素，一設(shè)置個(gè)，另一個(gè)設(shè)置，此時(shí)兩個(gè)元素的就會(huì)發(fā)生重疊。 1、元素的BFC特性 BFC全稱(chēng)為Block Formartting Context，中文為塊級(jí)格式化上下文。它是頁(yè)面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

    岳光 評(píng)論0 收藏0

  • CSS BFC特性(塊級(jí)格式化上下文)

    摘要：元素的特性全稱(chēng)為，中文為塊級(jí)格式化上下文。應(yīng)用之利用特性解決塌陷問(wèn)題塌陷是一般指在標(biāo)準(zhǔn)文檔流中，兩個(gè)垂直排列的元素，一設(shè)置個(gè)，另一個(gè)設(shè)置，此時(shí)兩個(gè)元素的就會(huì)發(fā)生重疊。 1、元素的BFC特性 BFC全稱(chēng)為Block Formartting Context，中文為塊級(jí)格式化上下文。它是頁(yè)面中的一塊獨(dú)立的渲染環(huán)境，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關(guān)系和相...

    chanthuang 評(píng)論0 收藏0

  • CSS小技巧（二）：布局

    摘要：在我們寫(xiě)代碼的過(guò)程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。不到萬(wàn)不得已，盡量少使用或在可控范圍內(nèi)使用?？梢栽诳s小瀏覽器窗口時(shí)等比例縮放。但此時(shí)不能加左右的，否則總寬度會(huì)超過(guò)的寬度。我們?yōu)檫_(dá)到目的讓同一類(lèi)和左右排布不同類(lèi)上下排布。 在我們寫(xiě)CSS代碼的過(guò)程中，可以養(yǎng)成記錄一些小技巧的習(xí)慣。 1. 一般特定的元素都有自己默認(rèn)的樣式，但是在我們的整體布局中，可能適得其反。我們可以去掉其默認(rèn)樣式。 ...

    Pink 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<