Question

所以我想尝试在html和css中这样做，但我似乎无法找到任何东西。我唯一可以想到的方法是将文本作为图像导入但看起来很糟糕。 P.S浅蓝色线用于居中，因为我首先在Photoshop中设计网站

-- the setup
Create Table SO_Check_Min_Date
(
    ID Int
    , StartDate Date
    , EndDate Date
    , Flag Int
)

Insert Into dbo.SO_Check_Min_Date
(
    ID
    , StartDate
    , EndDate
)
Values
(1,     '2017-01-01',    '2017-02-01'),
(1,     '2017-01-09',    '2017-01-28'),
(1,     '2017-04-01',    '2017-04-30'),
(1,     '2017-04-05',    '2017-05-20'),
(1,     '2017-04-20',    '2017-06-12'),
(2,     '2017-06-02',    '2017-06-20'),
(2,     '2017-06-14',    '2017-07-31'),
(2,     '2017-06-14',    '2017-07-31'),
(2,     '2017-06-19',    '2017-07-31'),
(2,     '2017-06-19',    '2017-07-31')

-- the logic
Declare
@Flag As Int = 0
, @StartDate As Date
, @LookupDate As Date
, @ID As Int
, @PrevID As Int = 0;

Select
    *
Into
    #Temp_SO_Check
From SO_Check_Min_Date;

Select * From #Temp_SO_Check As tsc   -- to see that the flag field is blank

While Exists
(
    Select Top 1
                1
        From    #Temp_SO_Check
        Where   Flag Is Null
)
Begin
    Select Top 1
                @ID = ID
                , @StartDate = StartDate
        From    #Temp_SO_Check
        Where   Flag Is Null
        Order By
                ID
                , StartDate;

    If @PrevID <> @ID
        Begin
            Set @Flag = 1;
            Set @PrevID = @ID;
        End;
    Else
        Set @Flag = @Flag + 1;

    Set @LookupDate = DateAdd(Day, 30, @StartDate);

    Update
        #Temp_SO_Check
        Set
        Flag = @Flag
        Where
        ID = @ID
        And StartDate Between @StartDate
                    And     @LookupDate;
End;

Select * From #Temp_SO_Check As tsc      -- to see that it has been populated as desired

Answer 1

一个简单的解决方案是使用text-decoration: underline overline;。

＆＃13;

p {
  text-decoration: overline underline;
}

＆＃13;

<p>
CONTACT ME
</p>

＆＃13;

Answer 2

您可以在css中使用border-top在文本上方创建一行。

.mytextbox {
    border-top: 1px solid #ff0000;
}

border-top property

Example of use

Answer 3

尝试使用边框来实现您想要的外观：

a.my-class {
    display: inline-block;
    padding: 5px 15px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    line-height: 1em;
    text-decoration: none;
}

Answer 4

好吧，你想在div中使用text元素，将div的bg color属性设置为你想要的颜色，然后设置文本元素的边距以推迟文本〜 10px左右（看起来就像是模拟中的位置）。从那里，您可以将边框设置为仅相应的顶部，底部和样式。

Answer 5

您可以将文本放在块级元素中并应用top and bottom border。针对text-decoration: underline overline;的此方法的优点是，您可以根据需要使用padding简单地定义文本和行之间的空格。

要使宽度与文本一样长，只需使用display: inline-block;。

＆＃13;

body {
  background: #5cc8f6;
}

div {
  display: inline-block;
  padding: .5em;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  color: white;
  text-transform: uppercase;
  font-family: Verdana;
  font-size: 2em;
}

＆＃13;

<div>Contact me</div>

＆＃13;

如何在html中的文本顶部添加一行？

5 个答案: