国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

HTML中dl元素的高度問題

Lowky / 1574人閱讀

摘要：元素通常用來創建一個描述列表，但是在我使用的過程中發現了一個小問題。元素有兩個特有的子元素，分別是和，用于在一個定義列表中聲明一個術語，用來指明一個描述列表元素中一個術語的描述。

dl元素通常用來創建一個描述列表，但是在我使用的過程中發現了一個小問題。
定義及用法

在MDN中

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


    
Name
    
    
Godzilla

    
Born

    
1952

    
Birthplace

    
Japan

    
Color

    
Green

這樣我們就得到了一個包含術語及其描述的列表：

給
元素添加樣式

在上面的展示中，

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

于是，我就給

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

結果呢，就出現了文章開頭時所說的小問題：

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

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

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

出現的結果是這樣的：

想必大家都看到了，定義術語的

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

解決

造成這個問題的原因是

和
自適應高度，而純數字的
高度要低于漢字內容的
，因此有兩種方法解決：
1 .既然純數字的高度和帶漢字的文本的高度不同，那我們在兩邊都加上漢字不就行了嘛：

完美～
講道理，皮這一下很開心...

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的高度，并且將行高設置為與高度相同，使文本垂直居中。

解決～

如果各位同學還有更好的解決方法，還請不吝賜教。
以上。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51712.html

相關文章

  • HTML5元素和語義化標簽

    摘要：站點前端開發文檔原文元素原文語義化標簽元素元素分類塊級元素自身屬性為的元素，通常使用塊級元素進行布局結構的搭建。可以和，，等其他標簽結合使用，表示文檔結構。表示標簽內容之外的，與標簽內容相關的輔助信息，元素被用于無關內容。 站點：前端開發文檔原文：HTML元素原文：語義化標簽 HTML元素 元素分類 塊級元素： div、h1-h6、hr、menu、ol、ul、li、dl、dt、d...

    caspar 評論0 收藏0

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

    摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

    岳光 評論0 收藏0

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

    摘要：元素的特性全稱為，中文為塊級格式化上下文。應用之利用特性解決塌陷問題塌陷是一般指在標準文檔流中，兩個垂直排列的元素，一設置個，另一個設置，此時兩個元素的就會發生重疊。 1、元素的BFC特性 BFC全稱為Block Formartting Context，中文為塊級格式化上下文。它是頁面中的一塊獨立的渲染環境，并且有一套渲染規則，它決定了其子元素將如何定位，以及它和其他兄弟元素的關系和相...

    chanthuang 評論0 收藏0

  • CSS小技巧（二）：布局

    摘要：在我們寫代碼的過程中，可以養成記錄一些小技巧的習慣。不到萬不得已，盡量少使用或在可控范圍內使用。可以在縮小瀏覽器窗口時等比例縮放。但此時不能加左右的，否則總寬度會超過的寬度。我們為達到目的讓同一類和左右排布不同類上下排布。 在我們寫CSS代碼的過程中，可以養成記錄一些小技巧的習慣。 1. 一般特定的元素都有自己默認的樣式，但是在我們的整體布局中，可能適得其反。我們可以去掉其默認樣式。 ...

    Pink 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<