ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS を使用してセカンダリ ナビゲーション メニューの幅を制御するにはどうすればよいですか? _html/css_WEB-ITnose
CSS を使用してセカンダリ ナビゲーション メニューの幅を制御するにはどうすればよいですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:28:441845ブラウズ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE><style type="text/css"> .menu{ border=none; font-family:verdana,geneva,arial; font-size:14px; color:#8e8e83; } .menu ul{ background:url(img/menu-bg.gif) top left repeat-x; /*横向平铺*/ height:43px; list-style:none; } .menu li{ float:left; } .menu li a{ color:#666666; display:block; font-weight:bold; line-height:43px; padding:0 25px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#000000; } /*定义二级菜单样式规则*/ .menu li ul{ background:#e0e0e0; /*设置二级菜单背景色*/ border-left:2px solid #007962; /*设置菜单左边框样式和颜色.*/ display:none; /*不再设置为块状显示效果*/ height:auto; position:absolute; width:130px; z-index:200; margin:0px; } .menu li:hover ul{ display:block; /*鼠标移动到上面的时候为块状显示。*/ } .menu li li{ display:block; width:130px; } .menu li ul a{ display:block; font-size:12px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); }</style> </HEAD> <BODY> <!--设置一个div里面，加盒子ul--><div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a> <ul> <li><a href="#">国际新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">体育新闻</a></li> </ul> </li> <li><a href="#">财经</a> <ul> <li><a href="#">股票市场</a></li> <li><a href="#">证券行情</a></li> <li><a href="#">基金保险</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul></div> </BODY></HTML>
回复讨论(解决方案)
.menu li ul a{
display:block;
font-size:12px;
text-align:left;
}
给这句话重设padding;
padding:0 0px;
哦，看错了，修改下面的width值。
.menu li li{
display:block;
width:130px;
}
还有这个的width值
.menu li ul{
background:#e0e0e0; /*设置二级菜单背景色*/
border-left:2px solid #007962; /*设置菜单左边框样式和颜色.*/
display:none; /*不再设置为块状显示效果*/
height:auto;
position:absolute;
width:130px;
z-index:200;
margin:0px;
}
我觉得可以这样来处理
CSS样式
.menu .ul 定义最外层UL的样式。
.menu .ul li
.menu .ul ul定义里面UL的样式，这样用的的确比较少，楼主可以试一下。
或者再定义一样样式直接附给里面的UL
.kuan {width:100px;}
862824f039339e556686f9c558696a29
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812首页5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812新闻5db79b134e9f6b82c0b36e0489ee08ed
2cc059319f5e1696e20ac1004bea5107 直接给它加个样式不就行了
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812国际新闻5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812国内新闻5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812体育新闻5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812财经5db79b134e9f6b82c0b36e0489ee08ed
ff6d136ddc5fdfeffaf53ff6ee95f185
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812股票市场5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812证券行情5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812基金保险5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
bed06894275b65c1ab86501b08a632eb
25edfb22a4f469ecb59f1190150159c6f1b3ba8846c179e65eb68da95b01a812联系我们5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
まず問題を見つけて、スタイルによってどの幅の値が変更されるかを確認し、Firefox、Chrome、または IE 以降のバージョンのブラウザを使用して、表示したいナビゲーション バーを右クリックしてください。要素、ブラウザ 新しい表示ボックスが表示され、指定したラベル要素に使用されている有効なスタイルを確認して変更できます。