刪除輸入和按鈕之間的差距

在這裏，我想會使代碼它的工作

<input class="txt" type="text" name="name"> 
<button class="btn">Submit</button> 


.txt { 
    display: inline-block; 
    width: 80%; 
    outline: none; 
    margin:0; 
} 

.btn { 
    display: inline-block; 
    width: 20%; 
    margin:0; 
}

http://jsfiddle.net/rm9etsny/

但是，仍然是2元之間的間隙。我怎樣才能刪除它？

感謝

來源

2014-11-08 macsig

你可以把你的HTML內容顯示在一行。這將刪除空格，而無需利潤率左爲負

<input class="txt" type="text" name="name"><button class="btn">Submit</button>

而且把它們放在一個水平行對齊，你需要考慮給一些不太％輸入。

演示 - http://jsfiddle.net/RahulB007/rm9etsny/5/

來源

2014-11-08 04:21:04 RahulB

這似乎解決了這個問題，但爲什麼我必須添加負邊距？有沒有辦法在不使用這個技巧的情況下實現我所希望的？ – macsig 2014-11-08 04:25:42

是的，我認爲它會做@macsig – Skynet 2014-11-08 04:38:19

是的，如果你還加'''* { 盒大小：邊界盒; }'''你可以保留80/20，並且不需要使用更少的％。 http://jsfiddle.net/torbcfuh/ – macsig 2014-11-08 04:41:57

-1

您可以設置.btn元素上邊距負值，例如：

margin-top: -3px;

來源

2014-11-08 04:10:50

我說的差距不是縱向的，而是橫向的。目前該按鈕位於該字段之下，因爲元素之間存在水平間距，因爲字段爲80％，而按鈕爲20％，總空隙大於100％，並且按鈕被按下。只要嘗試將該字段設置爲60％http://jsfiddle.net/zzgor1po/並且您看到該問題。 – macsig 2014-11-08 04:15:51

的問題，因爲內嵌塊給兩個項目之間的額外空間可以防止它通過使用float:left或使用box-sizing:border-box添加父與font-size:0填充從內部

例如教

如果輸入寬度是100%和填充是15px所以總寬度爲100％+ 15像素box-sizing:border-box從i給出padding n面

在我的例子我已經改變了邊境outset

演示 - http://jsfiddle.net/rm9etsny/11/

body { 
 
    background-color: red; 
 
} 
 
div { 
 
    font-size:0; 
 
} 
 
.txt { 
 
    display: inline-block; 
 
    width: 80%; 
 
    font-size: 2em; 
 
    outline: none; 
 
    padding: 15px; 
 
    margin:0; 
 
    box-sizing:border-box; 
 

 
} 
 
.btn { 
 
    display: inline-block; 
 
    margin: 0; 
 
    outline: 0 none; 
 
    padding: 0; 
 
    width: 20%; 
 
    box-sizing:border-box; 
 
}

<div> 
 
    <input class="txt" type="text" name="name" /> 
 
    <button class="btn">Submit</button> 
 
</div>

來源

2014-11-08 04:27:59

並沒有真正解決問題 – macsig 2014-11-08 04:38:17

感謝您的回覆。而不是在font-size中使用不必要的div：0我更喜歡內聯元素並在它們之間添加註釋。 – macsig 2014-11-08 04:45:52

-1

在值一些變化調整按您的要求。

.txt{ 
    border:1px solid black; 
    color:black; 
    height:50px; 
    width:400px; 
    left:30%; 
    position:absolute; 
    } 

.btn{ 
background:black; 
border:1px solid black; 
color:white; 
height:40px; 
width:60px; 
top:3%; 
right:33%; 
position:absolute; 
}

來源

2014-11-08 04:28:42 nitish

刪除輸入和按鈕之間的差距

回答

相關問題