我正在尝试创建一个菜单，该菜单具有3个可点击区域，占据了nav_top div的整个高度，并且在调整浏览器大小时会以这种方式缩小。每个LI左侧有一个图标，颜色背景不同。我遇到的问题是，如果你解决了一件事，其他事情就会搞砸了。 如果我向右漂浮，则第一个li成为第3个 如果我尝试制作每个
li a {
height:100%;
width :30%:
background-color: red;
}
没有任何事情发生
image of what im trying to do 它应该简单到使每个li增加30％宽度和100％高度添加背景颜色并在其左侧填充图像。让Ul漂浮在导航员的70％宽度但没有任何工作，它开始让我生气了
<!DOCTYPE html>
<style>
/* CSS Document */
html,body{
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#f0f0f0;
}
/* MOBILE BROWSER THING*/
.menu{
width:60%;
border: 1px solid blue;
}
a.menu-link {
display:none;
}
/* MOBILE BROWSER THING*/
header{
width:100%;
display:table;
border: 1px solid red;
background-color:#f0f0f0;
}
#logohold{
width:19%;
background-color:#0FF;
height:125px;
float:left;
}
#navhold{
width:79%;
background-color:#3F0;
height:125px;
border: 1px solid purple;
float:right;
}
#nav_top{
border: 1px solid green;
background-color:#f0f0f0;
width:100%;
height:49%;
}
#nav_bot{
border: 1px solid green;
background-color:#f0f0f0;
width:100%;
height:49%;
}
#float_right{
float:right;width:79%;}
#tpmenu{
float:right;
background-color:#F0F;/* visulize nav*/
width:100%;
height:100%;
text-transform: uppercase;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#tpmenu li {margin: 0;
padding: 0;
border: 1px solid blue;/* visulize each li*/
display:inline;/* left to right li*/
}
#tpmenu li a{margin: 0;
padding: 0;
padding-top:20px;
padding-bottom:20px;
text-decoration:none;
text-align: center;
font-size:15px;
height:100%;/* take up the full width of the ul div*/
border: px solid green;/* visulize each li*/
display:inline-block;/* left to right li*/
width:30%;/* each li is 30% width*/
}
#tpmenu li.top_app a {
color:#FFF;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left; background-color:#000000;
}
#tpmenu li.top_quote a {
color:#FFF;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left;
background-color:#F00;
}
#tpmenu li.top_repair a {
color:#000;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads/2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left;
background-color:#f0f0f0;
}
*/
/* telephone number */
#top_menu_phone{
float:right;
}
#top_menu_phone a{
}
span.tele{
height:15px;
width:15px;
background:url('http://www.cheesetoast.co.uk/cheesepress/wp-content/uploads /2012/08/home.gif') no-repeat no-repeat ;
background-position:center;
background-position:left;
}
#mobmenu_hidden{
display:none;/* hides the mobile menu button on destop*/
height:100%;
width:15%;
background-color:#0FF;
}
</style>
<header>
<div id="logohold">logo</div><!--logohold-->
<div id="navhold">
<div id="nav_top">
<div id="mobmenu_hidden">hidden menu</div><!--mobmenu_hidden-->
<div id="float_right">
<ul id="tpmenu">
<li class="top_repair"><a href="repair status">repair status</a></li>
<li class="top_app"><a href="set up appointment">set up appointment</a> </li>
<li class="top_quote"><a href="get a quote">get a quote</a></li>
</ul>
</div><!--float_right-->
</div><!--nav_top-->
<div id="nav_bot">nav_bottom
<!--top_menu_phone-->
<div id="top_menu_phone"><a href="tel:16142585555"><span class="tele"> & nbsp; </span> (614)258-5555</a> </div>
<!--top_menu_phone-->
</div><!--nav_bot-->
</div><!--navhold-->
</header><!--header-->
答案 0 :(得分：0)
对不起，但你的代码哇哇有点不清楚
在这个例子中我使用了Flexbox我不确定它是否是你想要的但它看起来就好像你给我5分钟我会解释我做了什么以及为什么!!
所以我总是去做父母＆＃34; display:flex;就像我在导航栏旁边标出徽标一样！
我把所有东西都放在div的右边，只在父母身上留下2div，左边是徽标，右边是导航
然后我给了右边一个我做display:flex;的地方，但这次flex-direction:column;将顶部放在底部
回到顶部你确实想要70％，所以我选择margin:16px;，因为默认情况下有一个边距，默认情况下左边是padding:40px
现在在顶部你放了你的李，你给他们height:100%; and width:30%;
然后在你的背景和你<a>
我认为这是
我希望这就是你要找的东西
.test{
height:125px;
width:90%;
margin:auto;
background-color:pink;
display:flex;
justify-content:space-between;
}
.logo{
background-color:red;
width:19%;
height:100%;
}
.right{
width:100%;
height:125px;
background-color:blue;
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:center;
}
.top{
margin:0px;
padding-left:0px;
width:70%;
height:50%;
display:flex;
justify-content:flex-end;
background-color:cyan;
list-style:none;
}
.one{
width:30%;
height:100%;
background-color:pink;
display:flex;
align-items:center;
justify-content:space-around;
}
.phone{
height:15px;
width:15px;
background:white;
}
.two{
width:30%;
height:100%;
background-color:brown;
}
.tree{
width:30%;
height:100%;
background-color:gold;
}
.green{
height:50%;
width:100%;
background-color:green;
}<div class="test">
<div class="logo">
<h1>logo</h1>
</div>
<div class="right">
<ul class="top">
<li class="one">
<div class="phone">
</div>
LI One
</li>
<li class="two">
two
</li>
<li class="tree">
tree
</li>
</ul>
<div class="green">
bottom
</div>
</div>
</div>