簡體   English   中英

html問題,div定位問題

[英]html issue ,a div positioning problem

我已經為我的應用程序實現了Facebook樣式搜索建議功能。 但是,我在這里面臨一些問題。

i)以下是搜索框和結果div代碼:

<div align="right" style=" width:300px; float:right; margin-right:30px">
            <input type="text" id="searchbox" class="searchbox" maxlength="100" style="color: rgb(170, 170, 170);">&nbsp; &nbsp;<img src="../../../asset/images/search.png" style="margin:0 0 -5px 2px"><br><br>
            <input type="hidden" value="http://www.plus-one-me.com/search/google/interests" id="formurl" name="formUrl">
                <div id="display">
                </div>
            </div>

搜索結果將顯示在#display div中,如下所示:

<div id="display" style="display: block;">
    <div class="display_box" align="left"> Cakephp </div>
    <div class="display_box" align="left"> Myspace </div>
    <div class="display_box" align="left"> Php </div>
</div>

這是我們在搜索區域中輸入任何內容之前頁面的外觀: 在此處輸入圖片說明

以下是搜索結果div的功能:

在此處輸入圖片說明

基本上,它會調低我主要內容區域中的菜單。 那么如何使用CSS修復此問題?

以下是樣式:

菜單div在后台的位置(包含選項HomeHistorySettings)

.menuBar .submenu {

padding:4px 12px 5px 12px;
margin-right:8px;
border:2px solid #EEE;
text-decoration:none;
display:inline-block;
float:left;
font-size:13px;
-moz-border-radius:40px;
border-radius:40px;
-webkit-border-radius:40px;
-moz-box-shadow:0 1px 3px #777;
-webkit-box-shadow:0 2px 3px #777;
box-shadow:0 2px 3px #777;
color:#333;
background: -webkit-gradient(linear, 0 0, 0 70%, from(#765), to(#FFF));
background: -webkit-linear-gradient(#000, #FFF 70%);
background: -moz-linear-gradient(#BBB, #FFF 100%);
background: -ms-linear-gradient(#765, #FFF 70%);
background: -o-linear-gradient(#765, #FFF 1000%);
background: linear-gradient(#765, #FFF 70%);
-pie-background: linear-gradient(#765, #FFF 70%);
}

我的搜索框:

#searchbox {
border: 1px solid #000000;
padding: 3px;
width: 250px;
}

和display_box的單個結果:

.display_box {
border-top: 1px solid #DEDEDE;
font-size: 12px;
height: 30px;
padding: 4px;
}

在此處輸入圖片說明

下拉菜單必須具有position:absolute 這會將其從頁面流中刪除,因此不會影響其他元素。

如@Galen所建議,請嘗試css:

#display {
position: absolute;
}

您可能希望改為輸出html thats,類似於

<ul id="display">
  <li>result</li>
  <li>result</li>
  <li>result</li>
</ul>

如果這樣做的話,您將得到如下的CSS

#display {
  position: absolute;
  list-style-type: none; list-style: none;
  margin: 0; padding: 0;
}

#display li {
   display: block;
   border-top: 1px solid #DEDEDE;
   font-size: 12px;
   height: 30px;
   padding: 4px;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM