Heim > Web-Frontend > HTML-Tutorial > 移除行块级元素之间的空格(译文)_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:22:07
Original
1307 Leute haben es durchsucht

引言

我现在仍然记得作为一个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>
Nach dem Login kopieren

下面是效果:

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

方法 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>
    Nach dem Login kopieren

    这种情况一般情况下和方法 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>
    Nach dem Login kopieren

    用一个单词形容这个。。。流氓(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>
    Nach dem Login kopieren

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

    方法 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>
    Nach dem Login kopieren

    跟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>
    Nach dem Login kopieren

    LAST

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

  • Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage