我为我的网页设计了一个标题,它使用了三个li
,但我的菜单需要变得更宽一些才能让它看起来更好。现在我的代码是这样的:
header {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-duration: 0.75s
}
header ul {
display: inline-block;
background: #fff;
text-align: center;
padding: 10px;
margin: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}

<header>
<div id="mobile-menu-close">
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<!-- Not sure if to menu or not -->
<ul id="menu" class="shadow">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
&#13;
我似乎无法弄清楚如何让它到达角落&#34;的网页没有搞乱不同的决议。
答案 0 :(得分:2)
您可以使用flex css
来实现此目标。
header {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-duration: 0.75s
}
header ul {
display: flex;
background: #fff;
text-align: center;
padding: 10px;
margin: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
justify-content: space-around;
list-style: none;
}
<header>
<div id="mobile-menu-close">
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<!-- Not sure if to menu or not -->
<ul id="menu" class="shadow">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
您还可以使用justify-content: space-between;
以适应全屏。希望这会对你有所帮助。
答案 1 :(得分:0)
试试这个...
这适用于大屏幕和小屏幕显示。
这是更改过的CSS代码......
/*start css*/
header {
background-color: #fff;
display: block;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
z-index: 10;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-duration: 0.75s;
}
header ul {
display: block;
background-color: #fff;
text-align: center;
padding: 20px 0 0 0;
margin: 0;
}
header li {
list-style: none;
transition: .5s;
}
header li a {
text-transform: uppercase;
display: block;
text-decoration: none;
border: 2px solid #fff;
padding: 30px;
margin: 0;
}
header li:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/*end css*/
你的HTML代码没有变化......
<!--start html-->
<header>
<div id="mobile-menu-close">
<span>Close</span> <i class="fa fa-times" aria-hidden="true"></i>
</div>
<!-- Not sure if to menu or not -->
<ul id="menu" class="shadow">
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#projects">Projects</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</header>
<!--end html-->
您可以进行剩余的必要更改 我希望这个答案能满足你的问题。