輸入字段＆提交按鈕不適合包含元素

我試圖讓我的搜索欄有一個流暢的輸入字段寬度，同時在它旁邊還有一個「搜索」按鈕。輸入字段＆提交按鈕不適合包含元素

看來，輸入字段.search比含有元素的方式做大稱爲的.navigation右，它會導致按鈕.search提交被推出包含div的。見下面的圖片。

的問題：

The Issue

我試圖使它看起來像：

enter image description here

這裏是我的代碼：（爲方便起見，我留出餘量&填充值）

CSS

.navigation-right { 
    width: 282px; min-width: 282px; 
    height: 50px; 

    display: table-cell; 
    vertical-align: top; 

    border: 1px solid #920000; 
} 

.search { 
    width: 100%; 
    height: 30px; 

    display: table; 
} 

.search-input { 
    height: 28px; 
    width: 100%; 

    display: table-cell; 

    border: 1px solid #920000; 
    outline: 0px; 
} 

.search-submit { 
    width: 30px; 
    height: 30px; 

    display: table-cell; 
    vertical-align: top; 

    margin: 0; 
    padding: 0; 

    border: 0; 
}

HTML

<div class="navigation-right"> 

    <form class="search"> 

     <input class="search-input"> 

     <button class="search-submit"></button> 

    </form> 

</div>

來源

2013-10-29 Swen

所以你正在尋找這樣的東西？ http://jsfiddle.net/Agony/xCp4B/ – usernolongerregistered

嗨，希望我的回答會幫助你... – w3b

更換下面

類

.search-input { 
    height: 28px; 
    width: 70%; 

    display: table-cell; 

    border: 1px solid #920000; 
    outline: 0px; 
}

來源

2013-10-29 12:48:55 w3b

這不是_exactly_我正在尋找，但它做到了。非常感謝！ – Swen

你已經確立了自己的搜索字段（.search輸入）有100％的寬度，這樣就會填滿它的父母。你需要的寬度減少到大約250像素

來源

2013-10-29 12:49:11

-1

.search-input { 
    height: 28px; 
    width: 100%; 
     display: table-cell; 
    border: 1px solid #920000; 
    outline: 0px; 
    position:relative; 
float:left; 
} 

.search-submit { 
    width: 30px; 
    height: 30px; 
    display: table-cell; 
    vertical-align: top; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    position:absolute; 
    float:left; 

}

來源

2013-10-29 12:53:43

它不會工作，對不起 – skip405

嗨，對不起，我發表了另一個答案。我希望這是現在。 –

是否有使用display: table;和display: table-cell;的特定需求？它讓我想起當時唯一的編碼方式是使用表格...

如果我可能建議an alternative way做同樣的事情，可以說做得更好:) - input元素將佔據其父項的100％按鈕的寬度固定（適用於流體或響應式佈局）。

來源

2013-10-29 13:01:44 skip405

這些表格被用作我在網站上其他部分上使用的一種破解。但它似乎並沒有在這裏工作。我嘗試了另一種方式，起初它似乎運作良好。但後來我發現它給我提供了一個問題，每當我在輸入元素上填充填充。我可能一直在做錯事。 – Swen

@Swen，是的，'padding'屬性被默認添加到'width'中，除非你包含'box-sizing：border-box;'屬性:)在鏈接問題 – skip405

.search-input { 
    height: 28px; 
    width: 70%; 

    display: table-cell; 

    border: 1px solid #920000; 
    outline: 0px; 
    float:left; 
} 

.search-submit { 
    width: 30px; 
    height: 30px; 

    display: table-cell; 
    vertical-align: top; 

    margin: 0; 
    padding: 0; 

    border: 0; 
    float:left; 
}

來源

2013-10-30 05:20:02

中完成同樣的事情。 http://jsfiddle.net/Agony/xCp4B/ –

輸入字段＆提交按鈕不適合包含元素

回答

相關問題