漂浮在漂浮物內？

我知道這個問題的標題聽起來很奇怪，但我不知道還有什麼可以稱之爲的。漂浮在漂浮物內？

首先，我有一個網格佈局，我希望我的.search-wrapper 50％寬並且正確地漂浮。在jsfiddle的演示中，整個.search-wrapper具有綠色背景色。這個元素保持它的方式很重要，因爲它適合我的網格。

在這裏面.search-wrapper我有一個搜索框和一個按鈕並排浮動。這正是我想要的。所以#search-button應該左移，input應該與其對齊。

但是，我無法實現的事情是如何同時浮動 - #search-button和'input to the right inside the outer container .search-wrapper`。

當前狀態...

enter image description here

我想它是這樣...

enter image description here

這裏是我的問題的演示：http://jsfiddle.net/mQSBR/2/ 對任何想法？非常感激你的幫助。謝謝！

來源

2012-07-01 matt

的你可以做一個'保證金左：在50px'最內層的'fieldset'把它推到右邊。你不需要像那樣在整個地方浮起來。它會變成一團糟。 –

看到這，如果這是你想要的效果：http://jsfiddle.net/mQSBR/9/ [編輯]

div.search { width: 180px; float: right; } /* fix to 180px wide, float to right */

還補充：

.search-wrapper { 
    min-width: 180px; 
}

所以包裝也不會走過去的.search當調整大小時。

來源

2012-07-01 07:06:38

您的橢圓出現在字段下方。 – Daedalus

@達達勒斯右側，IE已將其移過div。一個'字空間：不換行;'可以解決這個問題。 –

我沒有在IE上測試它... – Daedalus

你可以做這樣的事情

.search { 
    float: right; 
    width: 80%; 
}

來源

2012-07-01 07:03:16

你可以這樣做：

<fieldset style="margin-left: 20%"> 
    <div class="input-inside-label">

http://jsfiddle.net/userdude/mQSBR/3/

做了幾個編輯的，以彌補overflow-x滾動條：

#search-button { 
    ... 
    margin-left: -20px; 
    ... 
} 
.input-inside-label { 
    ... 
    margin-left: 0; 
    width: 70%; 
    ... 
}

http://jsfiddle.net/userdude/mQSBR/7/

來源

2012-07-01 07:03:34

這裏是更新的jsfiddle

<div class="wrapper search-wrapper"> 
    <div class="search"> 
    <form action="/" method="get"> 
     <fieldset> 
     <input type="text" name="s" id="search-box" value="" class="" placeholder="Search this platform …"> 
      <button type="submit" id="search-button">Search</button> 
     </fieldset> 
    </form> 
</div>

.search-wrapper { 
width: 50%; 
float: right; 
background:green; 
margin-top:1em;

}

#search-box { 
border: none; 
background-color: transparent; 
color: transparent; 
height: 20px; 
float: right;

}

#search-button { 
border: none; 
background-color: transparent; 
color: transparent; 
float: right; 
background-color:red; 
background-position: center -36px; 
background-repeat: no-repeat;

溶液

}

Right align of search box/button

另外，我的建議是使用元素的佔位符代替屬性標籤四溢

來源

2012-07-02 09:33:34

漂浮在漂浮物內？

回答

相關問題