HTML中导航条文字怎样弄成横排显示？ 怎样使导航条运用以下CSS样式后成横向显示.
\u600e\u6837\u8ba9HTML\u8bed\u8a00\u6587\u5b57\u6a2a\u7740\u663e\u793a\uff1f\u8bed\u6cd5\uff1awriting-mode:lr-tb\u6216writing-mode:tb-rl\u53c2\u6570\uff1a1\u3001lr-tb\uff1a\u4ece\u5de6\u5411\u53f3\uff0c\u4ece\u4e0a\u5f80\u4e0b2\u3001tb-rl\uff1a\u4ece\u4e0a\u5f80\u4e0b\uff0c\u4ece\u53f3\u5411\u5de6123456 body{text-align:center} .shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333} \u6211\u662f\u7ad6\u5217\u6392\u7248
HTML\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\uff0c\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u4e0b\u7684\u4e00\u4e2a\u5e94\u7528\u3002\u201c\u8d85\u6587\u672c\u201d\u5c31\u662f\u6307\u9875\u9762\u5185\u53ef\u4ee5\u5305\u542b\u56fe\u7247\u3001\u94fe\u63a5\uff0c\u751a\u81f3\u97f3\u4e50\u3001\u7a0b\u5e8f\u7b49\u975e\u6587\u5b57\u5143\u7d20\u3002\u8d85\u6587\u672c\u6807\u8bb0\u8bed\u8a00\u7684\u7ed3\u6784\u5305\u62ec\u201c\u5934\u201d\u90e8\u5206\uff08\u82f1\u8bed\uff1aHead\uff09\u3001\u548c\u201c\u4e3b\u4f53\u201d\u90e8\u5206\uff08\u82f1\u8bed\uff1aBody\uff09\uff0c\u5176\u4e2d\u201c\u5934\u201d\u90e8\u63d0\u4f9b\u5173\u4e8e\u7f51\u9875\u7684\u4fe1\u606f\uff0c\u201c\u4e3b\u4f53\u201d\u90e8\u5206\u63d0\u4f9b\u7f51\u9875\u7684\u5177\u4f53\u5185\u5bb9\u3002
\u4f7f\u5bfc\u822a\u6761\u8fd0\u7528\u4ee5\u4e0bCSS\u6837\u5f0f\u540e\u6210\u6a2a\u5411\u663e\u793a\uff0c\u9996\u5148\u6211\u4eec\u9700\u8981\u7ed9\u8fd9\u4e2a\u5bfc\u822a\u6761\u7684li\u8bbe\u7f6e\u4e00\u4e2afloat\u5c5e\u6027\uff0c\u8fd9\u6837\u5bfc\u822a\u6761\u5c31\u80fd\u591f\u6a2a\u5411\u7684\u663e\u793a\uff0c\u6a2a\u5411\u4e4b\u540e\u7684\u95f4\u9694\u4f60\u53ef\u4ee5\u901a\u8fc7\u7ed9\u8fd9\u4e2ali\u8fd9\u662fwidth\u548cheight\uff0c\u6216\u8005\u662fpadding\u6765\u5b9e\u73b0\uff0c\u4e2a\u4eba\u5efa\u8bae\u7528padding\uff0c\u80fd\u5b9e\u73b0\u7b49\u6bd4\u7684\u95f4\u9694\uff0c\u4f8b\u5b50\u5982\u4e0b\uff1a
#nav{width:900px; height:30px;}#nav ul li{float:left;padding:5px 30px; //\u901a\u8fc7padding\u5b9e\u73b0}#nav ul li{float:left;width:60px; //\u901a\u8fc7width\u5b9e\u73b0} \u9996\u9875 \u5174\u8da3\u7231\u597d \u597d\u53cb\u5370\u8c61 \u4f1a\u5458\u6ce8\u518c \u4f1a\u5458\u767b\u5f55
你之所以出现这个问题，原因在于
li{
list-style:none;
margin-top:0px;
text-align:left;
float:left;
width:30px; /* 这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大 */
}我把你的代码重新改了一下，可以稍微好一点。
无标题文档.html 文件代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" > /* 这行可以写得这样省略 */
<title>ul列表</title>
<link href="li.css" rel="stylesheet"> /* 使用外链CSS更好 */
</head>
<body>
/* <center/>标签去掉，这个标签是个淘汰的标签，可以用CSS控制 */
<div id="cs">
<div class="ul">
<ul>
<li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li><li>帮助中心</li><li>免费开店</li><li>全球咨询</li> /* li的代码全部连起来，可以让li之间没有一个默认的空格 */
</ul>
</div>
</div>
</body>
</html>
li.css 文件代码如下：
#cs {
background-image:url(admin.png);
width:1003px;
height:78px;
}
ul {
text-align: left; /* 对ul使用左对齐 */
padding: 0.15em 0 1px 0;
}
li {
display: inline; /* 直接用内联行显示，不用float，float不好控制 */
}
不用给li加width，直接加个 padding: 0 10px;多好！这样即使菜单字数不一样也能很好的显示~
此外，使用line-height可以是字在图片垂直方向居中
li{
list-style:none;
margin-top:0px;
text-align:left;
float:left;
width:30px;
}
中改为width:80px;
绛旓細1銆佹柊寤html椤甸潰 鎵撳紑html缂栬緫杞欢锛屾柊寤轰竴涓猦tml椤甸潰銆傚鍥撅細2銆佹坊鍔瀵艰埅鏍囩 鍦<body>鏍囩閲屾柊寤轰竴涓<ul></ul>鏍囩锛岀劧鍚庡湪<ul>鏍囩閲屾坊鍔犲嚑涓<li></li>鏍囩銆傚鍥撅細3銆佸湪<li>鏍囩鍐呮坊鍔鏂囧瓧銆傚湪鏂板缓鐨<li>娣诲姞瑕佹樉绀虹殑鍐呭銆傚鍥撅細4銆佸垱寤烘牱寮忔爣绛 鍦<title>鏍囩鍚庢柊寤轰竴涓<styletype=\"t...
绛旓細1銆鐢―reamweaver鍒涘缓涓涓柊鐨凥TML鏂囦欢锛2.鍏堟寜ctrls淇濆瓨锛屼互闃茬獊鐒舵柇鐢碉紝鏁版嵁涓㈠け锛3.灏唗itle淇敼涓篽tmlcss锛屽疄鐜版í鍚戝鑸锛4.鍒涘缓涓涓柊鐨刣ivid鈥淎鈥濆苟娣诲姞ulli鏍囩锛5.鍦╨i涓坊鍔犳墍闇鐨勬枃鏈紝骞惰皟鏁存枃鏈棿璺濄傛寜F12棰勮锛屽涓嬪浘鎵绀:6.棣栧厛鍘绘帀瀛椾綋鍓嶉潰鐨勫皬榛戠偣銆備唬鐮佸涓:7.棰勮锛屽鍥炬墍绀:8....
绛旓細li{ list-style:none; margin-top:0px; text-align:left; float:left; width:30px; /* 杩欏彞闄愬畾浜嗗垪琛ㄦ瘡鍒楃殑瀹藉害锛屽搴﹀お灏忥紝鎵浠鏂囧瓧鍙樻垚绔栧啓銆傚幓鎺夛紝鎴栬呮敼瓒冲澶 */ }鎴戞妸浣犵殑浠ｇ爜閲嶆柊鏀逛簡涓涓嬶紝鍙互绋嶅井濂戒竴鐐广傛棤鏍囬鏂囨。.html 鏂囦欢浠ｇ爜濡備笅锛<!doctype html>...
绛旓細鎴戜滑鍙互閫氳繃”a{display:block}“鐨勮缃潵瑙ｅ喅杩欎竴闂銆傜被浼肩殑锛屽綋鎴戜滑鎯宠鍊熷姪鍒楄〃锛岃揪鍒拌缃妯悜瀵艰埅鐩殑鏃讹紝鎴戜滑甯屾湜鍒楄〃鐨勬瘡涓琛岃兘澶熷湪鍚屼竴琛屾樉绀猴紝杩欐椂鎴戜滑涔熷彲浠ラ氳繃鍧楃姸缁撴瀯涓庤鍐呯粨鏋勭殑缁撳悎鏉ヨ揪鍒版鐩殑銆傛垜浠彧闇瑕佷负list娣诲姞涓琛屼唬鐮侊細list{display:inline;...
绛旓細1銆佺敤Dreamweaver鏂板缓涓涓狧TML鏂囦欢;2銆佹寜ctrl+s鍏堜繚瀛橈紝浠ラ槻绐佺劧鏂數鏁版嵁涓㈠け;3銆佷慨鏀箃itle涓篽tml+css瀹炵幇妯悜瀵艰埅;4銆佹柊寤轰竴涓猟iv id涓衡渁鈥濓紝娣诲姞ul li鏍囩;5銆佸湪li涓坊鍔犺嚜宸辨兂瑕佺殑鏂囧瓧 骞惰皟鏁村ソ鏂囧瓧闂磋窛,鎸塅12棰勮锛屽涓嬪浘鎵绀:6銆侀鍏堝幓鎺夊瓧浣撳墠闈㈢殑灏忛粦鐐癸紝浠ｇ爜濡備笅锛7銆侀瑙堬紝濡傚浘鎵绀:8...
绛旓細绗竴姝ャ佺紪鍐妯悜鑿滃崟鐨HTML浠ｇ爜鏋舵瀯璇峰皢浠ヤ笅浠ｇ爜娣诲姞鍒癏TML鏂囨。鐨勫鑸爮鍖哄煙涓侭aidu.ComCode52.NetYahoo.Com鏍囩鑼冨洿涓#menu{font:12pxverdana,arial,sans-serif;/*璁剧疆鏂囧瓧澶у皬鍜屽瓧浣撴牱寮*/}#menu,#menuli{list-style:none;/*灏嗛粯璁ょ殑鍒楄〃绗﹀彿鍘绘帀*/padding:0;/*灏嗛粯璁ょ殑鍐呰竟璺濆幓鎺*/margin:...
绛旓細鐒跺悗璁剧疆瀵艰埅鏉＄殑li宸︽诞鍔紝骞朵笖鍘绘帀li鍓嶉潰鐨勫渾鐐癸紝璁╁鑸潯鏇村ソ鐪嬨傜劧鍚庤缃鑸潯鐨刟鏍囩杞潡绾э紝浠ュ強瀵艰埅鏉¤彍鍗曠殑瀹介珮锛鏂囧瓧棰滆壊锛屾按骞冲瀭鐩村眳涓拰鑳屾櫙鑹蹭互鍙婂幓鎺塧鏍囩鐨勪笅鍒掔嚎銆傛帴鐫璁剧疆榧犳爣缁忚繃瀵艰埅鏉¤彍鍗曞彉鑹插嵆鍙傛渶鍚庯紝涓涓畬缇鐨勫鑸潯鑿滃崟灏卞畬鎴愪簡锛岀畝鐩存槸澶畝鍗曚簡銆
绛旓細浣犵殑nav閲岄潰璁剧疆浜唒adding:2em,2em锛屽乏鍙硃adding閮芥槸32px锛岃屼綘鐨勪簩绾ц彍鍗昹i娌℃湁璁剧疆width锛岄粯璁ょ殑瀹藉害鏄渶灏忕殑锛岃缃竴涓媤idth>80px锛屾垨鑰呭浜庝竴绾ц彍鍗曚簩绾ц彍鍗曞垎鍒缃畃adding
绛旓細<title>瀵艰埅鑿滃崟</title> <style type="text/css"> body,div,ul,li{margin:0;padding:0;} li{list-style-type:none;} a{text-decoration:none;} wrapper{width:980px;height:auto;overflow:hidden;margin:20px auto;} nav{width:980px;height:30px;background:#66f;} nav ul{padding-left...
绛旓細1銆佺敤Dreamweaver鏂板缓涓涓HTML鏂囦欢;2銆佹寜ctrl+s鍏堜繚瀛橈紝浠ラ槻绐佺劧鏂數鏁版嵁涓㈠け;3銆佷慨鏀箃itle涓html+css瀹炵幇妯悜瀵艰埅;4銆佹柊寤轰竴涓猟iv id涓衡渁鈥濓紝娣诲姞ul li鏍囩;5銆佸湪li涓坊鍔犺嚜宸辨兂瑕鐨勬枃瀛 骞惰皟鏁村ソ鏂囧瓧闂磋窛,鎸塅12棰勮锛屽涓嬪浘鎵绀:6銆侀鍏堝幓鎺夊瓧浣撳墠闈㈢殑灏忛粦鐐癸紝浠ｇ爜濡備笅锛7銆侀瑙堬紝濡傚浘鎵绀:8...
