-1
nav_top divの完全な高さを占める3つのクリック可能な領域を持つメニューを作成しようとしています。ブラウザのサイズを変更するとそのように縮小されます。各LIには左のアイコンと異なる色の背景があります。あなたが何かを修正した場合、何か他のものが壊れてしまうという問題があります。 私は各cantは正しく動作するようにnavメニューを取得します
li a {
height:100%;
width :30%:
background-color: red;
}
何もそれは各リチウム30％の幅を作るのと同じくらい簡単であるべき
image of what im trying to do を起こらないようにしよう場合、私は、Liは、右の最初のLiは第三
になっ浮く場合背景色を追加し、画像を左にパディングします。
<!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-->
捜しているものであると思います
それだと思いますgivマージンまたはhtmlへのパディング – DanyCode