div的CSS背景顏色

我有一個輸入字段和幾個圖像嵌套在一個div內。在div上，我設置了一個背景顏色，但問題是背景顏色只顯示第一個嵌套元素，它是輸入字段，沒有背景顏色，圖像落在它下面。div的CSS背景顏色

你可以在這裏查看：http://kbanda2.rochestercs.org/abc/home.html，用戶名密碼& = K

早些時候，我有哪些解決問題的股利一個固定的高度，但我不希望有一個固定的高度櫃面添加更多的元素後。

如果需要或檢查元素，您可以查看頁面源。

實際代碼：

<div id="wrapper"> 
    <input type="text" id="tfq" class="tftextinput2" name="q" size="30" maxlength="120" value="Enter cuisine type" /> 
    <input type="submit" value="Go" onclick="pop()" class="tfbutton2" /> 
    <br/> 
    <ul id="da-thumbs" class="da-thumbs"> 
     <!--restaurants will be appended into here through a script--> 
    </ul> 
</div>

CSS：

.da-thumbs li { 
    list-style-type: none; 
    float: left; 
    margin: 5px; 
    background: #fff; 
    padding: 8px; 
    position: relative; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    left:10px; 
} 
.da-thumbs li a, .da-thumbs li a img { 
    display: block; 
    position: relative; 
    color:white; 
    padding:5; 
} 
.da-thumbs li a { 
    overflow: hidden; 
} 
.da-thumbs li a div { 
    position: absolute; 
    background: rgba(75, 75, 75, 0.7); 
    width: 100%; 
    height: 100%; 
} 
.da-thumbs li a div { 
    //top: 0px; 
    bottom: -100%; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease-in-out; 
    -o-transition: all 0.3s ease-in-out; 
    -ms-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
} 
.da-thumbs li a:hover div { 
    bottom: 0px; 
} 
#wrapper { 
    max-width:940px; 
    margin:0 auto; 
    padding: 0 2%; 
    background:#dde0e1; 
}

來源

2014-12-04 Karina Banda

請包括足夠的代碼重現您的問題*在問題本身* – 2014-12-04 06:03:37

@ZachSaucier我已經編輯，以反映我的代碼 – 2014-12-04 06:10:07

ü要應用背景色爲包裝？請嘗試z-index。 – Jyothu 2014-12-04 06:16:42

的問題是因爲在列表中的浮動元素。全部li in ul正在浮動。

解決方案是在包裝div上添加類clearfix。並添加以下css。

CSS

.clearfix { 
    clear: both 
} 
.clearfix:after { 
    clear: both; 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    line-height: 0; 
    visibility: hidden; 
    width: 0; 
}

HTML

<div id="wrapper" class="clearfix"> 
content here 
</div>

來源

2014-12-04 06:15:42

<div id="wrapper"> 
     <input type="text" id="tfq" class="tftextinput2" name="q" size="30" maxlength="120" value="Enter cuisine type"><input type="submit" value="Go" onclick="pop()" class="tfbutton2"> 
    <br> 
    <ul id="da-thumbs" class="da-thumbs"> 
    </ul> 
    <div class="clearfix"></div> 
    </div>

在CSS

.clearfix 
{ 
clear:both; 
}

來源

2014-12-04 06:23:33

添加OVE rflow：隱藏;用於包裝

#wrapper{ 
max-width: 940px; 
margin: 0 auto; 
padding: 0 2%; 
background: #dde0e1; 
overflow: hidden; 
}

來源

2014-12-04 06:47:40 nikita

div的CSS背景顏色

回答

相關問題