赤いボックスが表示されず、代わりに行です

画像が見えるように、赤いボックスが線になっているので、高さを300pxに設定しましたが、画像はまったく効果がありません。私はHTMLとCSSを提供しました。 CSSページのdivulに200pxの高さを設定しました。赤いボックスが表示されず、代わりに行です

私は画像を追加することができませんので、画像を表示することはできません。

HTML PART：あなたはボーダートップの代わりの境界線を使用している

body{ 
    margin: 0px; 
    padding: 0px; 
} 

.div1{ 
    width: 800px; 
    height: 400px; 
    border: 1px solid #b4b4b4; 
    margin-left: 100px; 
    margin-top: 20px; 
} 

.div1 ul{ 
    width: 350px; 
    height: 200px; 
    border-top: 1px solid red; 
    margin-left: 100px; 
    margin-top: 20px; 
    list-style-type: none; 
} 

.div1 li { 
    width: 50px; 
    height: 52px; 
    border: 1px solid blue; 
    float: left; 
} 

.div1 img { 
    width: 40px; 
}

出典

2016-10-27 Danny Chang

：

<!DOCTYPE html> 
<html> 
<head> 
    <title>multiple box</title> 
    <link rel="stylesheet" type="text/css" href="test22.css"> 
</head> 
<body> 
    <div class="div1"> 
     <ul> 
      <li><img src="chicken.jpg"/></li> 
      <li><img src="chicken.jpg"/></li> 
      <li><img src="chicken.jpg"/></li> 
     </ul> 
    </div> 
</body> 
</html>

CSS PART。これだけボックスの上端が描かれ

body{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.div1{ 
 
    width: 800px; 
 
    height: 400px; 
 
    border: 1px solid #b4b4b4; 
 
    margin-left: 100px; 
 
    margin-top: 20px; 
 
} 
 

 
.div1 ul{ 
 
    width: 350px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    margin-left: 100px; 
 
    margin-top: 20px; 
 
    list-style-type: none; 
 
} 
 

 
.div1 li { 
 
    width: 50px; 
 
    height: 52px; 
 
    border: 1px solid blue; 
 
    float: left; 
 
} 
 

 
.div1 img { 
 
    width: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>multiple box</title> 
 
    <link rel="stylesheet" type="text/css" href="test22.css"> 
 
</head> 
 
<body> 
 
    <div class="div1"> 
 
     <ul> 
 
      <li><img src="chicken.jpg"/></li> 
 
      <li><img src="chicken.jpg"/></li> 
 
      <li><img src="chicken.jpg"/></li> 
 
     </ul> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-10-27 04:44:57 hannesvieider

赤いボックスが表示されず、代わりに行です

答えて

関連する問題