CSS布局 元素位置偏移

html-css021

CSS布局 元素位置偏移,第1张

是浏览器的默认样式

你在#divtest ul中加上margin:0padding:0

#divtest ul{

margin:0padding:0

position:absolute

height:200px

width:1500px

overflow:hidden

border:#C03 dotted 1px

top:0

left:0

}

margin_left:30px

或者padding:0 30px 0 0;

padding:0 30px 0 0; 意思是内边距上=0 ,右=30px,下=0,左=0

<!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="http://pic1.win4000.com/wallpaper/6/578855acae491.jpg" />

</div>

<div class="msg">

自驾游(多余的文字)<br> 会员价:

<strong style="color: red">9999元</strong>

</div>

</div>

</body>

</html>