javascript - 如何使用 CSS 使边框底线更长

Question

1. 我想延长 border-bottom 线，如下图所示:

如果这是不可能的，并且您有任何建议可以更改我的代码，那就太好了。

HTML:

<table id="showRoom">
<tr class="box_shadow">
    <td class="text_plant_address"> <span class="text_plant">Plant 1</span>

        <br /> <span class="text_address">Street 2, Dong An Industrial Park</span>

    </td>
</tr>

CSS:

body {
        background-color: #F6F6F6;
    }

    #showRoom {
        margin-left: 10px;
        margin-top: 10px;
        width: auto;
        border-collapse: collapse;
    }

    table .box_shadow {
        background-color: #FFF;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
        display: block;
        -webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        -moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
        box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
    }

    table tr .text_plant_address {
        background-color: #FFF;
        width: 175px;
        height: 175px;
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: normal;
        font-family: 'Scada', sans-serif;
        margin: 0;
        padding: 0;
    }

    table tr td span {
        height: 87.5px;
        width: auto;
    }

    table tr td .text_plant {
        border-bottom: 1px solid #D0D0D0;
    }

    table tr td .text_address {
        font-size: 10px;
    }

这是我的 JSFIDDLE: http://jsfiddle.net/QTNr5/

2.有谁知道下面字体的名字吗？

Answer 1

只需添加填充

table tr td .text_plant {
    border-bottom: 1px solid #D0D0D0;
    padding: 0 20px; /* or how longer you want */
}

Fiddle

对于字体-

1) 如果你只有一个图像文件而不是继续尝试随机字体，我想这是唯一的解决方案。

2) 如果它在某个网页上，通过 firebug 或任何其他代码检查工具检查它。

3) 如果它的 psd 或 vector 在其各自的工具中打开它并尝试编辑字体软件会告诉你名称，如 Photoshop 等。

4) 试试这个 http://www.myfonts.com/WhatTheFont/用于从 JPG 图像获取字体名称。

希望以上内容对您有所帮助。