1

我正在尝试为包含在 div 中的标题添加底部边框，但它会影响整个块。

<div class="title">I'm a title</div>

和我的 CSS

.title {border-bottom: 2px solid #000; padding-bottom: 3px;}

将此边框应用于文本的最佳方法是什么？

在文本周围环绕一个跨度将是理想的。但我无法访问 HTML。

<div class="title">
<span class="border">I'm a title</span>
</div>

我将如何使用 Jquery 用跨度包装文本。

我正在努力

$(".title").wrap('<span></span>');

还是有另一种方法来添加这个 CSS？

谢谢

4

3 回答 3

0 
.title {border-bottom: 2px solid #000; padding-bottom: 3px; display: inline;}
于 2012-04-04T03:13:37.013 回答
0

根据您想要获得的花哨，您可以通过设置text-decoration:underline（MDN）获得您想要的效果

这本身不是真正的边框，但如果您无法修改 html，这可能是您唯一的选择

于 2012-04-04T03:14:14.033 回答
0

“......我将如何使用 Jquery 用跨度包装文本。”

这应该回答你的问题：

<html>
<head runat="server">
    <title></title>

    <style>
        .border {border-bottom: 2px solid #000; padding-bottom: 3px;}
    </style>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.title').each(function(index) { 
                $(this).html("<span class='border'>" + $(this).html() + "</span>");
            });
        });
    </script>

</head>
<body runat="server">
    <div class="title" style="text-align: center">I'm a title</div>
</body>
</html>
于 2012-04-04T03:38:38.690 回答