漂浮在漂浮物内？

Question

我知道问题的标题听起来很奇怪，但我不知道还有什么可以称之为。

首先，我有一个网格布局，我希望我的.search-wrapper宽50％并向右浮动。在我jsfiddle的演示中，整个.search-wrapper都有绿色背景色。重要的是这个元素保持原样，因为它应该适合我的网格。

在这个.search-wrapper里面，我有一个搜索框和一个按钮并排浮动。这就是我想要它的方式。因此，#search-button应向左浮动，input应与其对齐。

然而，我无法实现的是如何同时浮动#search-button和'输入to the right inside the outer container。search-wrapper`。

当前状态......

我希望它的方式......

以下是我的问题演示：http://jsfiddle.net/mQSBR/2/ 有什么想法吗？非常感激您的帮忙。谢谢！

Answer 1

如果这是你想要的效果，请看这个：http://jsfiddle.net/mQSBR/9/ [编辑]

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

还添加：

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

所以在调整大小时，包装器不会超过.search div。

Answer 2

以下是更新的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

另外，我的建议是使用元素的占位符属性而不是溢出标签

Answer 3

你可以做这样的事情

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

Answer 4

你可以这样做：

<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/