1

在一个大 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;


}
4

2 回答 2

3

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

CSS-Tricks.com - 相对定位中的绝对定位

你用position: relative错了div，因为它应该被分配给.Right- 而header-search应该有'位置：绝对;' 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;
}
于 2012-10-20T20:06:39.277 回答
1

从您的 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/

于 2012-10-20T20:24:07.013 回答