如题所述
第1个回答 2017-07-05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.demo {
margin: 0 0 0 100px;
}
.img {
width: 200px;
height: 200px;
border: 1px solid #DCDCDC;
padding: 5px;
box-sizing: border-box;
}
.img img {
width: 100%;
height: 100%;
}
.msg {
width: 200px;
text-align: center;
box-sizing: border-box;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
border: 1px solid #000000;
/*left: -30px;你是不是布局出现了问题,如果你非要左移的话,去掉注释*/
}
</style>
<body>
<div class="demo">
<div class="img">
<img src="
</div>
<div class="msg">
自驾游(多余的文字)<br> 会员价：
<strong style="color: red;">9999元</strong>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.demo {
margin: 0 0 0 100px;
}
.img {
width: 200px;
height: 200px;
border: 1px solid #DCDCDC;
padding: 5px;
box-sizing: border-box;
}
.img img {
width: 100%;
height: 100%;
}
.msg {
width: 200px;
text-align: center;
box-sizing: border-box;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
border: 1px solid #000000;
/*left: -30px;你是不是布局出现了问题,如果你非要左移的话,去掉注释*/
}
</style>
<body>
<div class="demo">
<div class="img">
<img src="
</div>
<div class="msg">
自驾游(多余的文字)<br> 会员价：
<strong style="color: red;">9999元</strong>
</div>
</div>
</body>
</html>
第2个回答 2015-08-07
使用内边距标签padding 实现定位追问
我用过这个方法，可以实现，但是当我复制整个li代码时就会错乱，没有下图这样的效果
这种样式要用上外边距距margin属性实现按顺序排序，margin-top:10px;margin-left:10px;刚刚说错了上面回答的 padding是内边距
本回答被提问者采纳第3个回答 2017-07-17
没听懂，不能直接文字左移？position:relative; left:-2px;
第4个回答 2015-08-07
请给出具体代码
