目錄
引言
方法 4
方法 my
LAST
首頁 web前端 html教學 移除行块级元素之间的空格(译文)_html/css_WEB-ITnose

移除行块级元素之间的空格(译文)_html/css_WEB-ITnose

Jun 24, 2016 am 11:22 AM

引言

我现在仍然记得作为一个IE6时代的初级开发者拼命的渴望IE拥有display: inline-block;这个属性。当我们想控制间距和填充在inline元素儿不用block and float的时候,inline-block这个属性是及其的有用。
然而,使用inline-block的时候有一个问题,视觉上两个元素之间会出现空白。
有很多办法移除这些恼人的空白

方法 0

唯一一个百分之百解决这个问题的方案是这样:不要在这些元素的源码之间出现空白。

<style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}</style><ul><li>Item</li><li>Item</li><li>Item</li></ul>
登入後複製

下面是效果:

当然了,这个维护起来比较麻烦,但他很实用、和逻辑,最重要的是比较可靠。

方法 1

最好的空白解决方案:设置行区块元素的父元素font-size: 0。因此如果你有一个

元素包裹了一堆
  • 元素,你可以这么做。

    <style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}.inline-block-list{  font-size: 0;}.inline-block-list li{  font-size: 14px;}</style><ul class="inline-block-list">  <li>Item</li>  <li>Item</li>  <li>Item</li></ul>
    登入後複製

    这种情况一般情况下和方法 0是一样的结果,不过在IE8中,如果给行块级元素设置了position:absolute,这个会导致一个严重的问题,页面直接就是全部空白了。

    方法 2

    这种方法有点取巧的意思,但仍然可以用。在行块元素之间使用HTML注释,这个原理也是在元素源码之间没有空格

    <style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}.inline-block-list{  font-size: 0;}.inline-block-list li{  font-size: 14px;}.three{  position: absolute;  margin-left: 20px;}</style><ul class="inline-block-list">  <li>Item</li><!-- --><li>Item</li><!-- --><li class="three">Item</li></ul>
    登入後複製

    用一个单词形容这个。。。流氓(gross),两个单词形容这种方法。。。真流氓(really gross)。用三个单词。。。就是——你可以使用它(you get it)。他可以正常的显示。

    方法 3

    和方法 2类似,这个方法也有点令人遗憾。你可以利用行块元素的灵活性,用负的间距抵消空白

    <style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}.inline-block-list li{  margin-left: -4px;}</style><ul class="inline-block-list">  <li>Item</li>  <li>Item</li>  <li>Item</li></ul>
    登入後複製

    这是一个很差劲的方案,你必须计算这个负间距是多少,有时候还会有不可预料的空白。所以,尽量避免使用这种来解决行块元素之间的空白。

    方法 4

    另外一个基于HTML的hack解决方案就是——只需要将闭合标签>放到下一个标签的开始:

    <style type="text/css">ul,li{  margin: 0;  padding: 0;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;}.inline-block-list{  font-size: 0;}.inline-block-list li{  font-size: 14px;}</style><ul class="inline-block-list">  <li>Item</li  ><li>Item</li  ><li>Item</li></ul>
    登入後複製

    跟HTML注释这种方式相比,没有那么难看,但我知道,我可以移除空白,但没有去考虑这些空白为什么会存在。

    所有的这些解决方案没有一个是完美的,唯一可以选择的在HTML中不要使用空格和缩进也是一个不太好的方案。这不是告诉你“注意使用什么方案”,因为inline-block仍然非常的有用,但当开发者使用它的时候知道如何处理空白非常的重要。

    方法 my

    我的方法是使用浮动,这个在IE7中也是ok的,前面的这些方法在IE系列中某些低版本可能会失效(inline-block不起作用)

    <style type="text/css">ul,li{  margin: 0;  padding: 0;}ul:after{  content: '.';  height: 0;  visibility: hidden;  display: block;  clear: both;}li{  list-style: none;  display: inline-block;  border: 1px solid black;  padding: 2px;  float: left;}</style><ul class="inline-block-list">  <li>Item</li>  <li>Item</li>  <li>Item</li></ul>
    登入後複製

    LAST

    author: 燕睿涛
    email: ritoyan@163.com

  • 本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱門文章

    兩個點博物館:邦格荒地地點指南
    4 週前 By 尊渡假赌尊渡假赌尊渡假赌
    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章

    兩個點博物館:邦格荒地地點指南
    4 週前 By 尊渡假赌尊渡假赌尊渡假赌
    倉庫:如何復興隊友
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒險:如何獲得巨型種子
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱門文章標籤

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

    公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

    如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

    如何使用HTML5表單驗證屬性來驗證用戶輸入?

    如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

    如何高效地在網頁中為PNG圖片添加描邊效果?

    &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

    &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

    使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

    使用IFRAME的安全性含義是什麼?如何減輕它們?

    HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

    HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

    我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? 我如何使用html5&lt; time&gt; 元素以語義表示日期和時間? Mar 12, 2025 pm 04:05 PM

    我如何使用html5&lt; time&gt; 元素以語義表示日期和時間?

    我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? 我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? Mar 12, 2025 pm 04:08 PM

    我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素?

    See all articles