Question

在一个大的div我有搜索框，它基本上是一个有文本框玻璃图像和按钮的div。要求是将此搜索向导垂直放置在div的中间和右侧。这个盒子在div的左上方。我尝试了不同的东西，但没有得到如何设置它。请指导我。

由于

<div class="Right">
        <div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
            margin: auto 0 auto auto;">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right 
{
        width:50%;
        float:right ;
        border: 01px dashed green;
        height:95px !important;
        padding:auto 0 auto 200px;
}   

div.header-search
{
    overflow:auto;
    display:inline;
    text-align:right !important;
    border:3px dashed blue;    
    padding:20px 0 auto 50px;

}

div.header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;


    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;


     border:2px solid #316200;
     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;
     background:white url(../images/SearchImage.png) 0 50%  no-repeat;


 }

div.header-search input.searchbutton
{

  border-bottom-right-radius:5px;
  -webkit-border-bottom-right-radius:5px; 
  -moz-border-bottom-right-radius:5px;

   border-top-right-radius:5px;  
   -webkit-top-right-radius:5px; 
   -moz-right-radius:5px;

   background:#458A00;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #A5D376,  #326400); /* for firefox 3.6+ */  
  width:50px; 
  height:28px;
  color:White;
  font-size:16px;
  font-weight:bold ;
  border:2px solid #316200;
  border-left:none;


}

Answer 1

了解定位元素如何阅读这样一篇文章的第一步：

CSS-Tricks.com - absolute positioning inside relative positioning

您在错误的position: relative上使用div，因为它应该分配给.Right - 而header-search应该改为'position：absolute;'以及left/right和top/bottom

的值和值

上面的文章解释得比我做得好得多！

也许这将是一个很好的起点：

<div class="Right">
        <div class="header-search">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right {
        position: relative;
        width: 50%;
        float: right;
        border: 1px dashed green;
        height: 95px !important;
        padding: auto 0 auto 200px;
}   

div.header-search {
    position: absolute;
    right: 0;
    top: 0;
    overflow: auto;
    display: inline;
    text-align: right !important;
    border: 3px dashed blue;    
    padding: 20px 0 auto 50px;
}

Answer 2

从你的div中删除所有样式，因为这是不好的做法。接下来，转换.Right和.header-search的两种样式，如下所示：

div.Right {
    border: 1px dashed green;
    height:95px;
    position: relative;
}   

div.header-search {
    border:1px dashed blue;
    position: absolute;
    top: 30px;
    right: 0;
}

这应该可以完成您的尝试。没有一种干净，简单的垂直居中方式，但由于你在外面有一个固定的高度.Right div和搜索元素上的固定高度，最好只使用内部的固定顶部位置.header-搜索范围。

你可以在这个jsfiddle上看到它的实际效果：

http://jsfiddle.net/L4sgc/

将div放在另一个div中？

2 个答案: