我無法刪除兩個輸入字段之間的邊距

我試圖刪除搜索欄和「Go！」之間的邊距按鈕在本頁頂部：http://beta.linksku.com/我無法刪除兩個輸入字段之間的邊距

我已嘗試刪除所有樣式並添加margin:0;padding:0;border:none;，但兩個元素之間仍有餘量。我無法在JSFiddle上覆制這個問題，但它發生在我網站上的所有瀏覽器中。

來源

2012-03-23 Leo Jiang

有什麼問題？您想要將Go按鈕和輸入字段放在一起嗎？ – Connor 2012-03-23 00:57:38

如果您在「Go！」上放置了類似負餘量的內容（例如'margin-left：-5px'），會發生什麼情況？按鈕？ – 2012-03-23 00:59:23

這是元素inline-block如何運作。

通常當您使用inline-block元素時，您經常在段落中使用它們，所以字母之間的空格必須一致。 inline-block元素也適用於此規則。

如果你想完全刪除空間，你可以可以漂浮的元素。

float: left;

您還可以從模板文檔中刪除空格。像這樣：

<input type="text" name="s" tabindex="2" /><input type="submit" value="Go!" class="btn" />

來源

2012-03-23 01:00:39 martinjlowm

你可以設置字體大小爲0：不需要浮動！ – benesch 2012-03-23 01:02:12

你當然可以！我確實發現浮動是一種更合理的方式來解決這個問題。我應該刪除「必須」部分:) – martinjlowm 2012-03-23 01:04:34

@primatology將字體大小設置爲0？！？！你從哪裏學到的？在這種情況下，「浮動」是最好的答案，因爲OP希望將元素移出正常流程，以更好地控制定位... – xandercoded 2012-03-23 01:04:53

該空格與您的字體大小有關。你可以通過你的投入在容器上添加font-size:0刪除它，在這種情況下一種形式，就像這樣：

form { 
    font-size: 0; 
}

來源

2012-03-23 01:00:18

您看到的空間是應用於內聯元素的默認填充。最簡單的黑客？在form上設置font-size: 0，然後重置輸入和按鈕上的實際字體大小。

魔法。

form { 
    font-size: 0; 
} 

form input { 
    font-size: 12px;

爲什麼會發生這種情況？瀏覽器將input之間的空格解釋爲文本空間，並相應地進行渲染。你也可以把所有的元素一起用一條線擦掉，但這是難看的代碼湯。

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"> 
     <input type="submit" value="Go!" class="btn"> 
     </form>

變爲：

來源

2012-03-23 01:01:24 benesch

@Xander，我不同意。瀏覽器（ – benesch 2012-03-23 01:04:32

）之間的空間寬度不一致，雖然此解決方案需要更多擊鍵，並且如果在多個區域中實施，可能會變成一個難題。 – xandercoded 2012-03-23 01:09:40

在Mac上使用Chrome，如果我編輯的形式節點作爲HTML開發人員工具中，兩個關閉標籤之間移除空間，讓我可以擺脫空間的：

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><input type="submit" value="Go!" class="btn"> 
     </form>

來源

2012-03-23 01:05:51

一種方法是刪除空間，但如果你不願意擁有不可讀單行一塌糊塗，你可以使用HTML註釋：

<form id="search" method="get" action="http://beta.linksku.com/"> 
     <input type="text" name="s" tabindex="2"><!-- 
    !--><input type="submit" value="Go!" class="btn"> 
</form>

來源

2017-06-08 08:48:18 BusyBeingDelicious

我無法刪除兩個輸入字段之間的邊距

回答

相關問題