首页 > 代码库 > 图片和文字在同一水平线上
图片和文字在同一水平线上
在写页面的时候，我们经常会遇到，图片和文字的位置问题，比如图片和文字在同一水平线上，这个时候如果我们用2个div浮动来实现，或者一个div，图＋文字的方式实现，图片往往达不到标准的效果，此时需要调整图片的位置，来使得图片和文字在同一水平线上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.wenzi,.tupian{
float: left;
}
</style>
</head>
<body>
<div>
<img src="http://www.mamicode.com/images/icon1.png" >我要和图片在同一水平线上
</div>
<div>
<div class="tupian">
<img src="http://www.mamicode.com/images/icon1.png" >
</div>
<div class="wenzi">
<p>我要和图片在同一水平线上</p>
</div>
</div>
</body>
</html>
效果如上图，后期需要调整图片的位置，使之与文字在同一水平线上。
二、此时，利用列表，然后将图片设置成为列表的背景图片，先来看看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li{
width: 100%;
list-style: none;
background: url("../images/icon1.png") no-repeat ;
}
</style>
</head>
<body>
<div>
<ul>
<li>我要和图片在同一水平线上</li>
<li>我要和图片在同一水平线上</li>
</ul>
</div>
</body>
</html>
效果如上图，可以发现，图片和文字在同一水平线上 ，此时只需要调整下左侧内边距即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
li{
width: 100%;
list-style: none;
background: url("../images/icon1.png") no-repeat ;
padding-left: 30px;
}
</style>
</head>
<body>
<div>
<ul>
<li>我要和图片在同一水平线上</li>
<li>我要和图片在同一水平线上</li>
</ul>
</div>
</body>
</html>
图片和文字在同一水平线上
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。