如何將div與「display：inline-block」連成一行，沒有邊距？

無論何時我使用display:inline-block將水平行放在水平行中，即使設置了margin: 0 !important，它們之間也總是有餘量。有沒有辦法在div之間有正好0像素？如何將div與「display：inline-block」連成一行，沒有邊距？

這裏有一個簡單的例子，我有三個黑色的箱子，應該是連續的，但它們之間的空白：（Fiddle）

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
}

<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

來源

2017-08-03 Joe Morano

你試過/檢查了flexbox嗎？ –

https：// stackoverflow。com/questions/5078239/how-to-remove-the-space-between-in-line-block-elements –

有不同的方法來解決這個問題，請檢查這個鏈接，這應該有所幫助：https://css-tricks.com/戰鬥空間之間的行間塊元素/ –

這是因爲元件之間的新線。你對此有何評論它像我一樣，或者相互

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
}

<div class="div"></div><!-- 
 
--><div class="div"></div><!-- 
 
--><div class="div"></div>

來源

2017-08-03 10:05:37 Swellar

Woooooooow。我永遠不會想到這一點。太瘋狂了。謝謝！ –

你應該給font-size: 0父容器。字體大小給內嵌塊提供了小的邊距。

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
} 
 
.container { 
 
    font-size: 0; 
 
}

<div class="container"> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
</div>

來源

2017-08-03 10:04:17

你確定嗎？我試過了：https://jsfiddle.net/ketrb1ac/2/ –

是的：https：//jsfiddle.net/xooL3drg/ –

@Swellar，謝謝，完成:) –

.divlist { 
 
    position: relative; 
 
    font-size: 0; 
 
} 
 
.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    font-size: 16px; 
 
}

<div class="divlist"> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
</div>

來源

2017-08-03 10:05:16

-2

我加入定義爲Flexbox的包裝使這些元素內聯。

.wrapper { 
 
    display: inline-flex; 
 
} 
 

 
.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="wrapper"> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
    <div class="div"></div> 
 
</div>

來源

2017-08-03 10:05:43 Gerard

彈性項目被封鎖，所以它們不再具有'inline-block'的顯示值。 – Alohci

好點。我將其更改爲內聯-FLEX – Gerard

請注意，製作包裝內聯-FLEX並沒有幫助。內聯-Flex元素仍然是柔性容器，柔性容器的子項是彈性項目，並且彈性項目被阻止。 – Alohci

有更好的外層div並添加樣式字體大小0

如：

.div { 
 
    position: relative; 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 !important; 
 
    font-size: 14px; 
 
    color:#fff; 
 
    text-align:center; 
 
} 
 
.main-div { 
 
    font-size:0; 
 
}

<div class="main-div"> 
 
<div class="div">1</div> 
 
<div class="div">2</div> 
 
<div class="div">3</div> 
 
</div>

來源

2017-08-03 10:06:35 Punith

-1

正如格列布說，把font-size:0;在容器上。您也可以將容器放入display: inline-flex;或display: flex;。

來源

2017-08-03 10:07:58 Chaaampy

使用display: table-cell;

.div { 
 
    position: relative; 
 
    display: table-cell; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

來源

2017-08-03 10:08:45 Vishnu

我知道這是不乾淨的解決方案，但在這裏就是我如何做到這一點：

.div { 
 
    display: inline-block; 
 
    background: black; 
 
    width: 100px; 
 
    height: 100px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    margin-right : -0.25em; 
 
}

<div class="div"></div> 
 
<div class="div"></div> 
 
<div class="div"></div>

嵌入塊不需要的邊距是衆所周知的，你會發現其他解決方案here

來源

2017-08-03 10:17:33 Crssss

如何將div與「display：inline-block」連成一行，沒有邊距？

回答

相關問題