漂浮在漂浮物内？

我知道这个问题的标题听起来很奇怪，但我不知道还有什么可以称之为的。漂浮在漂浮物内？

首先，我有一个网格布局，我希望我的.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

漂浮在漂浮物内？

回答

相关问题