有个CSS问题搞不定，大家给帮个忙？让所有汉字在水平方向上平行显示
0
悬赏园豆：30
[已解决问题]
解决于 2014-02-09 08:34
现在显示出来的字，有拼音选项的和没有拼音选项的无法在同一行上对齐，列不要求对齐，能否在不改html内容，而只改header里的css来实现这一功能。
要求：
1.下面这段是根据输入的汉字输出的内容，这段代码是我测试发现可以以最少的html输出实现显示效果的代码。要求只能改header里的css,不能在body里增加任何内容。原因是需求中汉字数平均一篇文章中有5000字左右，所以如果,比如将li改为div，就会多出5000*2（这个标签是成对出现的，所以乘以2）个字符的性能损失。
2.<br/>直接放在li里非法的，但很多浏览器可以识别，此贴暂不讨论这个问题。
3.这段html里用来维护一篇被注音的汉字文章的，我已经想了几个月才想出来这样的一个样子。如果谁有更好的可节省流量性能的方法，请不吝赐教。
最主要的还是如何让水平方向的汉字横向对齐显示，现在多音字显示都偏下, 这才是发本帖的目的？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style id="pinyinCSS" type="text/css"> ul.pinyin{ padding:0px; margin:0px; list-style-type:none; vertical-align:bottom; } ul.pinyin li{ display:inline-table; margin:2px; height:px; font-size:14px; } ul.pinyin li div{ height:30px; line-height:30px; margin:0px; padding:0px; } ul.pinyin li select{ padding:0px; margin:0px; font-size:12px; } </style> </head> <body> <form name="form1" method="post" action="Test2.aspx" id="form1"> <ul class="pinyin"> <li><div>chūn</div>春</li> <li><div>jiāng</div>江</li> <li><div>huā</div>花</li> <li><div>yuè</div>月</li> <li><div>yè</div>夜</li> <li><div> </div></li> <br /> <li><div> </div></li> <br /> <li> <div> <select name="PinYinEditor1$rptPinYin$ctl09$ddlPinYin" id="PinYinEditor1_rptPinYin_ctl09_ddlPinYin"> <option selected="selected" value="zuò">zuò</option> <option value="zuō">zuō</option> </select> </div> 作 </li> <li><div>zhě</div>者</li> <li><div> </div>：</li> <li> <div> <select name="PinYinEditor1$rptPinYin$ctl12$ddlPinYin" id="PinYinEditor1_rptPinYin_ctl12_ddlPinYin"> <option selected="selected" value="zhàng">zhàng</option> <option value="zhāng">zhāng</option> </select> </div> 张 </li> <li> <div> <select name="PinYinEditor1$rptPinYin$ctl13$ddlPinYin" id="PinYinEditor1_rptPinYin_ctl13_ddlPinYin"> <option selected="selected" value="rě">rě</option> <option value="ruò">ruò</option> </select> </div> 若 </li> <li><div>xū</div>虚</li> <li><div> </div></li> </ul> </form> </body> </html>
最佳答案
0
ul.pinyin li{ display:inline-table; margin:2px; height:px; font-size:14px; }中的display值改为inline-block就可以了。
收获园豆：30
高手啊，css博大精深啊。
