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、間違って使用していますが、代わりに「position：absolute;」が必要です。およびの値div.Rightheader-searchleft/righttop/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からすべてのスタイリングを削除してください。次に、2つのスタイルを.Rightと.headerに変換します-次のように検索します。

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

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

これはあなたが試みていることを達成するはずです。垂直方向を中央に配置するためのクリーンで簡単な方法はありませんが、外側の高さが固定されているため、検索要素の右のdivと高さが固定されているため、内側の.header-の上部の位置を固定するのが最適です。探す。

あなたはこのjsfiddleで実際にそれを見ることができます：

http://jsfiddle.net/L4sgc/

于 2012-10-20T20:24:07.013 に答える