我希望红色正方形与绿色正好重叠。 在FF,IE和Opera中一切正常,但在Chrome红色方块左侧对齐,而不是居中。 另外,我只能影响#parent div及其子代,因为我制作了一个书签,我无法更改其他页面元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#center { text-align: center; }
#parent {
position: absolute;
display: inline;
}
#nested {
background-color: #c00;
width: 280px !important;
height: 210px !important;
}
</style>
</head>
<body>
<div id="center">
<div id="parent"><div id="nested"></div></div>
<div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div>
</div>
</body>
</html>
请,建议!
当我详细介绍chrome属性时,我发现当你为#parent设置绝对位置时,chrome会强制显示阻塞。如何使其内联?
答案 0 :(得分:0)
我认为这是在视觉上您要求的内容:
#parent
和#nested
。<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
#center { text-align: center; }
#parent {
position: absolute;
left: 0;
right: 0;
/*top: 0;*/
text-align: center
}
#nested {
background-color: #c00;
width: 280px !important;
height: 210px !important;
display: inline-block
}
</style>
</head>
<body>
<div id="center">
<div id="parent"><div id="nested"></div></div>
<div style="display: inline-block; width: 280px; height: 210px; background-color: #0c0;"></div>
</div>
</body>
</html>