首页 新闻 赞助 找找看

有个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>&nbsp;</div></li>
            <br />
            <li><div>&nbsp;</div></li>
            <br />
            <li>
                <div>
                    <select name="PinYinEditor1$rptPinYin$ctl09$ddlPinYin" id="PinYinEditor1_rptPinYin_ctl09_ddlPinYin">
                    <option selected="selected" value="zuò">zu&#242;</option>
                    <option value="zuō">zuō</option>
                    </select>
                </div></li>
            <li><div>zhě</div>者</li>
            <li><div>&nbsp;</div>:</li>
            <li>
                <div>
                <select name="PinYinEditor1$rptPinYin$ctl12$ddlPinYin" id="PinYinEditor1_rptPinYin_ctl12_ddlPinYin">
                    <option selected="selected" value="zhàng">zh&#224;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ě</option>
                        <option value="ruò">ru&#242;</option>
                    </select>
                </div></li>
            <li><div>xū</div>虚</li>
            <li><div>&nbsp;</div></li>
        </ul>
    </form>
</body>
</html>
空明流光的主页 空明流光 | 初学一级 | 园豆:106
提问于:2014-02-08 19:45
< >
分享
最佳答案
0

ul.pinyin li{ display:inline-table; margin:2px; height:px; font-size:14px; }中的display值改为inline-block就可以了。

收获园豆:30
小乔布斯 | 菜鸟二级 |园豆:446 | 2014-02-08 23:02

高手啊,css博大精深啊。

空明流光 | 园豆:106 (初学一级) | 2014-02-09 08:34
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册