4

可能很简单的 CSS，但我已经看了很久了。

我想在同一行上有两个元素：

  • 文本框
  • 搜索图标图像

无论宽度如何，搜索图标都应保持相同大小，文本框应对齐 100% 的空间（但仍要确保图标就在它旁边。

我的问题可以在这张图片中看到（由于文本框的 100% 宽度，它们不会对齐）：

在此处输入图像描述

我的标记：

<div class="SearchBox">
                        <div class="searchDiv">
                            <div class="searchDivFullSpan">
                                <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
                            </div>
                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
                        </div>
                </div>

我的CSS：

.SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDivFullSpan {
    display: inline;
}

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

有什么提示吗？真的很感激:-)

4

5 回答 5

2

您应该尝试显示表格单元格而不是内联。您将需要另一个容器 div。然后将 searchDiv 和 searchDivFullSpan 的宽度都设为 100%。searchDiv 的两个子 div 都需要设置为显示表格单元格。

.SearchInputBox {
  border: 1px solid #C6D1AD;
  font-size: 20pt;
  background-color: #FAFAFA;
}

.searchDiv {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.searchDiv div {
  display: table-cell;
}

.searchDivFullSpan {
  width: 100%;
}

.searchDivFullSpan input[type=text] {
  width: 100%;
}

.searchDiv input[type="text"] {
  background-color: #f3f3e9;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
<div class="SearchBox">
  <div class="searchDiv">
    <div class="searchDivFullSpan">
      <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
    </div>
    <div class="searchImageDiv">
      <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
    </div>

  </div>

</div>

<div class="SearchBox">
     <div class="searchDiv">
        <div class="searchDivFullSpan">
             <asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"></asp:TextBox>
         </div>
         <div class="searchImageDiv">
             <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" />
          </div>

      </div>

</div>



<style>

    .SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDiv div {
  display:table-cell;
}

    .searchDivFullSpan {
    width:100%;
    }

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
</style>
于 2013-08-28T17:51:56.730 回答
1

尝试这个：

代码：

.SearchBtn{
    display:inline-block;
    float:right;
    bottom:24px;
    position:relative;
}
.SearchInputBox {
    border: 1px solid #C6D1AD;
    font-size: 20pt;

    background-color: #FAFAFA;
}

.searchDiv {
    padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

.searchDivFullSpan {
    display: inline;
}

.searchDivFullSpan input[type=text] {
    width: 100%;
}

.searchDiv input[type="text"] {
    background-color: #f3f3e9;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

HTML 代码：

<div class="SearchBox">
   <div class="searchDiv">
      <div class="searchDivFullSpan">
         <input type="text" id="SearchOnGoogleBox"/>
      </div>
      <input type="button" value="Click" class="SearchBtn"/>
   </div>
</div>

jsfiddle

于 2013-08-28T17:42:27.563 回答
1

我目前无法对此进行测试，但是类似以下内容呢：

 .searchDiv{
       padding-left: 25px; //MAKE THIS THE WIDTH OF YOUR IMAGE PLUS A BIT EXTRA
       position:relative;
  }

  .searchDivFullSpan input[type=text] {
        width: 100%;
  }

  input[type="image"]{
      width: 20px; //ADJUST THIS, BUT ADJUST ABOVE IN TANDEM
      position:absolute; 
      top:10px;  //FIDDLE WITH THESE TWO PROPERTIES AS NEEDED
      left:5px;

  }
于 2013-08-28T17:39:14.927 回答
1

我不知道它是否有帮助，但看看这个例子，我正在使用引导程序 3：

<div class="form-inline" style="display: block;">
  <input type="text" id="text-field-1" class="form-control" size="4" max="4" min="4">
  <input type="text" id="text-field-2" class="form-control" size="3" max="3">
  <button class="btn btn-info form-control" type="button" id="search">
      <i class="fa fa-search"></i>
  </button>
</div>

通过将 class="form-inline" 添加到容器 Div 中，您将强制所有内容保持在同一行，但如果您想强制元素始终并排放置，则必须添加 display:block，无论多么小你是显示分辨率。

于 2015-05-09T16:49:06.467 回答
0

唔，

将图标放在绝对位置的输入字段上怎么样？
或者也许更好的解决方案是这样的：

两个 div：一个固定，另一个拉伸

两个 div 并排，一个 100% 宽度其他宽度取决于内容

如果这不是将有助于制作小提琴。

于 2013-08-28T17:28:13.687 回答