首页 新闻 会员 周边 捐助

html字符串的下划线问题

0
悬赏园豆：10 [已解决问题] 解决于 2014-05-01 00:01

现在要实现的一个功能有点像以前考试时候的填空题的空白下划线，但是也不完全像。

首先要有一个下划线可以控制下划线和文字上下距离，比如可以使用div然后使用其边框，如果单纯使用样式好像不能控制与文字距离。

然后这个下划线的长度是固定的如果遇到一行结束需要自动换行，下划线上的文字需要在该下划线上居中。文字不会超过下划线长度。

目前我改变span的display但是该下划线不会自动换行。

麻烦各位高手给个好的解决方案。谢谢

可以使用freemarker,css实现。

童同的主页 童同 | 菜鸟二级 | 园豆：258
提问于：2014-04-29 14:46
< >
分享
最佳答案
2 
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .con {
            background: #ededed;
        }
        span.under {
            width: 150px;
            display: inline-block;
            padding-bottom: 20px;
            border-bottom: 1px solid red;
            text-align: center;
        }
        span.under1 {
            width: 150px;
            display: inline-block;
            padding-bottom: 10px;
            border-bottom: 1px solid red;
            text-align: center;
        }
        span.under2 {
            width: 150px;
            display: inline-block;
            padding-bottom: 2px;
            border-bottom: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="con">
    <span class="under">aaaaaaaaaaaaaa</span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
    <span class="under1">aaaaaaaaaaaaaa</span>ccccccccccccccccccccccccccccccccccccccccc
    <span class="under2">aaaaaaaaaaaaaa</span>ddddddddddddddddddddd
    <span class="under2">aaaaaaaaaaaaaa</span>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
    <span class="under2">aaaaaaaaaaaaaa</span>ffffffffffffffffffffffffffffffffffffffffff
    <span class="under1">aaaaaaaaaaaaaa</span>gggggggggggggggggg
    <span class="under">aaaaaaaaaaaaaa</span>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    <span class="under1">aaaaaaaaaaaaaa</span>iiiiiiiiiiiiiiiii
    <span class="under1">aaaaaaaaaaaaaa</span>jjjjjjjjjjjj
    <span class="under2">aaaaaaaaaaaaaa</span>kkkkkkkkkkkkkkkkkkkkkkkkkkkk
    <span class="under1">aaaaaaaaaaaaaa</span>llllllllllllllll
    </div>
</body>
</html>
View Code

试试看，应该可以

收获园豆：10
ThreeTree | 小虾三级 |园豆：1490 | 2014-04-29 20:59

不是我想要的。下划线不能换行。还是把分给你吧

童同 | 园豆：258 (菜鸟二级) | 2014-05-01 00:00
其他回答(1)
0

使用带有下划线背景的图片伪装一下

wongdavid | 园豆：394 (菜鸟二级) | 2014-04-30 21:05

没有这个必要吧

支持(0) 反对(0) 童同 | 园豆：258 (菜鸟二级) | 2014-05-01 00:00

@童同: 其实你也可以用input做成左右上边框无色，下边框做成黑色边框就行了。这样做更好点吧。

支持(0) 反对(0) wongdavid | 园豆：394 (菜鸟二级) | 2014-05-01 00:09
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。