如何使用CSS延長邊框底線

Question

1. 我想像下面的圖像一樣延長邊框底線的長度：

如果這是不可能的，並且您有任何建議對我的代碼進行更改，那將很棒。

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 */
}

小提琴

對於字體-

1）如果您只有一個圖像文件，而不是繼續嘗試隨機字體，那么我猜這就是解決方案。

2）如果它在某些網頁上通過Firebug或任何其他代碼檢查工具進行檢查。

3）如果是psd或vector，請在各自的工具中將其打開，然后嘗試編輯字體軟件，則會告訴您名稱，例如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添加padlet和： http : //jsfiddle.net/QTNr5/4/

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

Answer 3

<edit>問題被誤解了，答案給出了一個再次為紅色，白色和紅色的底部邊框：）外部的紅色.... </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，在植物1之后使用3。

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

我知道這不是最好的答案，但希望它會有所幫助，並且您可以根據您的要求增加

Answer 5

您可以將跨度更改為div並刪除br。 默認情況下，div將顯示為塊，因此它們占用了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

當然，嘗試在<span>添加： padding: 10px 0 。