我需要创建一个网站标题,如下所示:
图片上方的徽标和菜单;
无论图像是什么,徽标和菜单都是相同的。
图片上将有标题和文字。
每个图像的标题和文本将有所不同。
徽标应在左侧,菜单应在右侧;
徽标+菜单最多只能占据600px的宽度(包装纸)。
那个包装器应该放在站点的中心。
所以我有以下online example:
header {
text-align: center;
}
div.wrapper {
margin: 0 auto;
max-width: 600px;
text-align: left;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 0;
padding: 0;
}
em {
border: 1px solid red;
position: absolute;
z-index: 2000;
}
nav {
position: absolute;
z-index: 2000;
right: 0;
}
.slides {
position: absolute;
width: 100%;
}
.slide img {
position: relative;
width: 100%;
}
.slide .text {
position: absolute;
text-align: center;
top: 80px;
width: 100%;
}
<header>
<div class="wrapper">
<em class="brand">
<img src="http://via.placeholder.com/200x40"/>
</em>
<nav class="menu">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="slides">
<div class="slide">
<img src="http://via.placeholder.com/400x200?text=100 percent width" />
<div class="text">
<h2>Slide 1</h2>
<p>Text of slide 1</p>
</div>
</div>
<div class="slide" style="display:none;">
<img src="http://via.placeholder.com/400x200?text=100 percent width" />
<div class="text">
<h2>Slide 2</h2>
<p>Text of slide 2</p>
</div>
</div>
</div>
</header>
<main>
Main content
</main>
我目前遇到的问题是徽标+菜单未居中,最大宽度为600px。但老实说,我不确定我使用的定位方法是否正确。
最佳答案
问题是nav
作为position
的absolute
,要在logo and menu
的slide
中心对齐两个max-width:600
,需要将position:relative
添加到作为.wrapper
父元素的nav
中。 。
位置-绝对从常规文档流中删除该元素;没有
在页面布局中为元素创建了空间。相反,它是
相对于其最接近的祖先的位置;
否则,它相对于初始包含块放置。
div.wrapper {
margin: 0 auto;
max-width: 600px;
text-align: left;
position:relative;/*Add this*/
}
因此,它的
relative
到.wrapper
并在幻灯片中心对齐。header {
text-align: center;
}
div.wrapper {
margin: 0 auto;
max-width: 600px;
text-align: left;
position: relative;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 0;
padding: 0;
}
em {
border: 1px solid red;
position: absolute;
z-index: 2000;
}
nav {
position: absolute;
z-index: 2000;
right: 0;
}
.slides {
position: absolute;
width: 100%;
}
.slide img {
position: relative;
width: 100%;
}
.slide .text {
position: absolute;
text-align: center;
top: 80px;
width: 100%;
}
<header>
<div class="wrapper">
<em class="brand">
<img src="http://via.placeholder.com/200x40"/>
</em>
<nav class="menu">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="slides">
<div class="slide">
<img src="http://via.placeholder.com/400x200?text=100 percent width" />
<div class="text">
<h2>Slide 1</h2>
<p>Text of slide 1</p>
</div>
</div>
<div class="slide" style="display:none;">
<img src="http://via.placeholder.com/400x200?text=100 percent width" />
<div class="text">
<h2>Slide 2</h2>
<p>Text of slide 2</p>
</div>
</div>
</div>
</header>
关于html - 将徽标,菜单和标语放在图片幻灯片上,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45918573/