文本框與按鈕齊平

-1

我正在嘗試在左右兩個按鈕上創建一個輸入框。這裏的弗蘭肯斯坦怪物我到目前爲止：http://vegan.fm/clone/?p=8679 文本框與按鈕齊平

它應該看起來像文本框+按鈕的位置：http://appsumo.com/welcome/?next=/

我已經能夠得到它的排列形式的不好，但它似乎只得到混雜在不同的操作系統或計算機上。

我已經通過調整填充和邊距值來做到這一點，但我的直覺告訴我有一個更好的做法。到目前爲止，我還沒有發現任何與谷歌/ stackoverflow搜索。任何幫助表示讚賞。謝謝。

更新：我遇到的問題是按鈕的「高度」值和輸入框完全相同，但按鈕始終高於輸入框。

下面是一些代碼：

.halfbutton { 
    border-top: 1px solid #f0d995; 
    background: #806a43; 
    padding: 0px 3px 0px 3px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#d1ad51), to(#806a43)); 
    background: -moz-linear-gradient(top, #d1ad51, #806a43); 
    height: 30px; 
    width:25px; 
    -webkit-border-radius: 8px 0 0 8px; 
    -moz-border-radius: 8px 0 0 8px; 
    border-radius: 8px 0 0 8px; 

    text-shadow: rgba(0,0,0,.4) 0 1px 0; 
    color: white; 
    font-size: 14px; 
    font-family: Helvetica, Arial, Sans-Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    }

而對於輸入框：

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> 

    <input style="z-index:1999;height:30px;margin:0 -.1em 0 -.1em;border:1px solid;border-color:#a1a1a1;" size="20" type="text" name="s" id="s" value="<?php ... /> 
</form>

來源

2011-03-15 Adam Grant

也許嘗試隱藏輸入框本身的邊界（因爲所有的瀏覽器似乎添加填充和邊距有點不同）。將輸入框插入帶有邊框的大小div中或使用背景圖像。 – 2011-03-15 20:40:09

該死的，這是個好主意。我會嘗試的。謝謝。 – 2011-03-15 20:53:23

downvote的原因是什麼？ – 2014-06-10 20:31:26

鄧諾我有沒有理解這個問題的權利。
爲了讓您的鏈接看起來像，您需要在輸入表單中使用背景圖片;
你可以使它看起來像用CSS3
插入輸入表單中的CSS

#inputform{ 
    background-color: #f7f7f7; 
    -moz-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1); 
    -webkit-box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1); 
    box-shadow:inset -2px 2px 10px rgba(0, 0, 0, .1); 
    ... 
}

有沒有在你的代碼的網站的評論的鏈接;

來源

2011-03-15 21:37:01 ted

感謝您的代碼。經過更多的討論後，我發現，出於某種原因，我的CSS按鈕不像其他div容器和輸入框那樣服從高度屬性。 – 2011-03-15 22:39:07

我已經更新了一些額外的信息來澄清。 – 2011-03-15 22:54:04

@ajkochanowicz我編輯我的帖子，由於你的代碼; http://jsfiddle.net/28FvM/97/ 你的CSS中有幾個＃，所以他們所有我包括 – ted 2011-03-16 09:53:37

目前，對齊似乎確定我（在Chrome），但沒有邊界的輸入，所以很難說出發生了什麼事情。

我的評論雖然 - 現在你有add'l搜索選項作爲輸入字段左側的下拉菜單，然後在輸入右側添加add_l選項的「更多」下拉菜單。我認爲這不符合典型用戶的搜索框模型，其中輸入的右側是提交/選項按鈕。也許可以將選項按鈕移動到右側，然後將「更多」作爲單獨按鈕浮動到該（或下方）的右側。

只是一個想法。

來源

2011-03-15 21:16:23 Voodoo

謝謝，巫毒教。我目前正在通過以前的建議，這就是爲什麼有這種奇怪的邊界。 – 2011-03-15 21:34:25

你對這些建議是正確的。目前這些鏈接只是一種佔位符，因爲這是vegan.fm的原型網站 – 2011-03-15 21:34:48

文本框與按鈕齊平

回答

相關問題