图片怎么在文字上上方?我写的样式还差哪里?还有谁能来个全面的css 交集selector说明
图片了规定的li样式是不是错了?他不是行内元素吗,会有宽度吗图片说明](https://img-ask.csdn.net/upload/201806/28/1530191607_767372.jpg)
应该是display: inline-block把
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
h3 {
color: red;
text-align: center;
}
ul,li {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
width: 120px;
line-height: 30px;
}
</style>
</head>
<body>
<h3>title text</h3>
<ul>
<li><img src="1.png" width="100" height="100" border="0" alt="">text1</li
><li><img src="2.png" width="100" height="100" border="0" alt="">text2</li
><li><img src="3.png" width="100" height="100" border="0" alt="">text3</li>
</ul>
</body>
</html>
用<br />换行啊
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
h3 {
color: red;
text-align: center;
}
ul,li {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
li {
display: inline-block;
width: 120px;
line-height: 30px;
}
</style>
</head>
<body>
<h3>title text</h3>
<ul>
<li><img src="1.png" width="100" height="100" border="0" alt=""><br />text1</li
><li><img src="2.png" width="100" height="100" border="0" alt=""><br />text2</li
><li><img src="3.png" width="100" height="100" border="0" alt=""><br />text3</li>
</ul>
</body>
</html>
在CSS样式里面设置display: inline-block
block可以设置宽度的
把图片放到一个
里 , 使用浮动定位让图片浮动,边距可使用外边距 margin , 再使用一个div里面放文本 , 空格使用
用弹性布局，display:flex;flex-direction:column;就可以了