Question

这是一个奇怪的...我需要显示一个总是在浏览器中居中的图形。容易。

但问题是这个图形是某些品牌的一部分......品牌要求图形中的一条线在浏览器宽度的持续时间内不断向右延伸。

示例：

| --------- [标志]]]]]]]]] |

我以为我能够将DIV居中，创建一个UL，然后将LI向左浮动......但由于父DIV宽度，问题变成了LI被推到下一行，我不知道如何阻止它......

Answer 1

按照您喜欢的方式放置图形，并在背后贴一个div，顶部边框为线条。绝对定位并设置左：0和右：50％。像这样:(尝试调整浏览器窗口的大小）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<div style="position:absolute; border-top:solid 1px #CCC; left:0; right:50%; z-index:0; margin-top:20px;">&nbsp;</div>
<div style="position:absolute; width:200px; margin-left:-150px; left:50%; z-index:1; background:#CCC; padding:25px">this is a logo</div>
</body>
</html>

Answer 2

您可以使用CSS3获得多个背景图像。

像这样的东西

#header{
    background-image: url(images/logo.img), url(images/logo_line.img);
    background-position: center;
    background-repeat: no-repeat, repeat-x;
}

此处有更多信息：http://www.css3.info/preview/multiple-backgrounds/

CSS：以图形为中心，然后继续向右移动模式

2 个答案: