如何刪除分表之間的空間

正如你可以看到在this fiddle兩個底部divs之間有一個空格。我該如何解決這個問題？如何刪除分表之間的空間

的HTML

<div id="textbox"></div> 
<div id="textboxSquare"></div> 
<div id="textboxSquare"></div>

的CSS

* { 
    margin: 0; padding: 0; 
} 

#textbox { 
    border: 1px solid #848484; 
    -webkit-border-top-left-radius: 30px; 
    -moz-border-radius-topleft: 30px; 
    border-top-left-radius: 30px; 
    -webkit-border-top-right-radius: 30px; 
    -moz-border-radius-topright: 30px; 
    border-top-right-radius: 30px; 
    outline:0; 
    height:25px; 
    display: block; 
    box-sizing: border-box; 
    width: 300px; 
    padding-left:20px; 
    padding-right:20px; 
} 

#textboxSquare { 
    display:inline-block; 
    box-sizing: border-box; 
    height:25px; 
    width: 150px; 
    border: 1px solid #848484; 
}

來源

2013-11-23 user2602766

不重複的DIV ID，S對於初學者使用類 – 422

把所有這些<div> S的在同一直線上，它就會消失。

這是一個與display: inline-block;

問題下面是雅參考：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Fixed your fiddle

看那個甚至沒有注意到對方的錯誤：只使用一個#ID一旦。該文件將被搜索，直到找到第一個#ID，然後停止。

<div id="textbox"></div> 
<div id="textboxSquare"></div> <!-- This id="" must be unique to all others in the document --> 
<div id="textboxSquare"></div> <!-- This id="" must be unique to all others in the document -->

使用類，而不是：http://jsfiddle.net/8B875/4/

那撥弄還實現了使用float: left;性質不同的方法，但你必須，如果你走這條路線潛在調整其他的東西。

來源

2013-11-23 14:44:42 Deryck

請勿使用負邊距。

打的一個好方法是字母間距招，你設置它的字母間距的父格爲0，然後重置它的inline-block的DIV裏面normal

來源

2013-11-23 14:49:32

添加

float:left; 
clear:none;

在#textboxSquare：

#textboxSquare { 
    display:inline-block; 
    box-sizing: border-box; 
    height:25px; 
    width: 150px; 
    border: 1px solid #848484; 
    float:left; 
    clear:none; 
}

Fiddle

來源

2013-11-23 14:50:32 PMint

爲什麼downvote？請澄清。 – PMint

包括'float：left;'自動暗示'display：block;'並且取消display：inline-block;'all。我並不是故意低調，我得到了點擊，現在我找不到一種方法來刪除downvote。所以顯然你得到upvote而不是lol :) – Deryck

要刪除（向下）投票，只需點擊橙色箭頭。 – PMint

就像說已經不使用重複的ID。但這不是問題。使用已分配display: inline-block;到你的DIV的。簡單地刪除這個聲明並添加一個float:left;這些項目。

來源

2013-11-23 16:04:48 meavo

只是在你的HTML刪除div的間距是這樣的：

<div id="textbox"></div> 
<div id="textboxSquare"></div><div id="textboxSquare"></div>

或

<div id="textbox"></div> 
<div id="textboxSquare"></div><!-- 
remove this space 
--><div id="textboxSquare"></div>

來源

2013-11-25 05:48:34

如何刪除分表之間的空間

回答

相關問題