Question

我想比以往更长的时间延长边框底线：

如果这是不可能的，并且您有任何建议要对我的代码进行更改，那就太棒了。

border-bottom length

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.有人知道下面字体的名称吗？

Font name

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或矢量在各自的工具中打开它并尝试编辑字体软件会告诉你像Photoshop等名称。

4）尝试使用此http://www.myfonts.com/WhatTheFont/从JPG图像中获取字体名称。

我希望其中任何一个对你有所帮助。

Answer 2

您可以从text_plant移动边框底部，并将其设置为text_address上的边框顶部，如下所示：http://jsfiddle.net/QTNr5/2/

table tr td .text_plant {

}
table tr td .text_address {
    font-size: 10px;
    border-top: 1px solid #D0D0D0;
    padding-top: 4px;
}

或者如果你想缩短它，可以像这样在text_plant中添加padding let和right：http://jsfiddle.net/QTNr5/4/

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

Answer 3

<edit>问题误解了，答案给出了一个红色，白色和红色的底部边框:)外部的红色...... 3colors bottom border </edit>

您可以使用伪元素绘制红色部分： http://codepen.io/anon/pen/axvgl/

td {
  text-align:center;
}
.text_plant {
  font-size:2em;
  border-bottom:solid white;
  box-shadow:
    0 1px 0 gray, 
    inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
  content:'';
  display:inline-block;
  width:1.25em;
  box-shadow:inherit;
  border-bottom:solid red;
  margin-bottom:-3px;/* size of border*/
  vertical-align:bottom;
}

或使用渐变http://codepen.io/anon/pen/ftmDn/

td {
  text-align:center;
}
.text_plant {
  display:inline-block;
  font-size:2em;
  padding:0 1em;
  box-shadow:
    0 1px 0 gray;

  background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
  background-size:100% 3px, 100% 4px ;
}

Answer 4

如果你想要你的解决方案如何... 然后我会推荐这个..

在植物1和3之前使用3 .. 像这样

<td class="text_plant_address"> <span class="text_plant">&nbsp;&nbsp;&nbsp;Plant 1&nbsp;&nbsp;&nbsp;</span>

我知道这不是最好的答案，但希望它会有所帮助，你可以根据你增加

Answer 5

你可以将你的跨度改为div并删除br。 Divs默认显示为块，因此它们占据了td的整个宽度。我修改你的小提琴来显示div。如果您不希望它触及框的边缘，请在您的td中添加填充。

http://jsfiddle.net/mrNXW/

<td>
  <div class="plant">Plant 1</div>
  <div class="address">Street 2, Dong An Industrial Park</div>
</td>

Answer 6

您正在寻找的字体我相信是这样的：

http://www.dafont.com/ballpark-weiner.font

Answer 7

当然，请尝试将padding: 10px 0添加到<span>。

如何使用CSS使边界底线更长

7 个答案: