0

我知道这个问题的标题听起来很奇怪，但我不知道还能叫什么。

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

在这里面.search-wrapper我有一个搜索框和一个按钮并排浮动。这正是我想要的样子。所以#search-button应该向左浮动并且input应该向右对齐。

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

目前的状态……</p>

在此处输入图像描述

我希望它是这样的方式...... </p>

在此处输入图像描述

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

4

4 回答 4

2

看到这个，如果这是你想要的效果：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。

于 2012-07-01T07:06:38.750 回答
1

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

​</p> 

.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;

}

​</p>

搜索框/按钮右对齐

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

于 2012-07-02T09:33:34.260 回答
0

你可以做这样的事情

.search {
  float: right;
  width: 80%;
}
于 2012-07-01T07:03:16.873 回答
0

你可以这样做：

<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-01T07:03:34.337 回答