Question

如何创建一个内容块，其中包含如下图所示的标题？我已经使用5px solid #444751进行了一些测试，但是我无法将该名称对齐到该行的右侧和中间位置。在他们下面我会放置一张图片。

enter image description here

Answer 1

试试这个：

<div class="line"></div>Batteries


.line {
    border-top:5px solid #444751;
    float:left;
    width:200px;
    margin-top:7px;
    margin-right:5px;   
}

Answer 2

您需要将文字与栏中心对齐vertical-align。看看这个JSFiddle。

这是我用过的CSS

#bar {
    width: 150px;
    height: 5px;
    background: black;
    display:inline-block;
}
#text{
    text-transform: uppercase;
    display:inline-block;
    vertical-align: -2px;
}

Answer 3

您可以使用渐变来实现效果。 HTML很小：

<h1>BATTERIES</h1>

你也不需要太多的CSS：

h1 {
    font-family: sans-serif;
    line-height: 25px;
}
h1:before {
    width: 200px;
    height: 25px;
    display:inline-block;
    background: linear-gradient(transparent 40%, #000 40%, 
        #000 60%, transparent 60%);
    content:'';
}

这就是全部，您可以在http://dabblet.com/gist/2719686

看到它

请记住，渐变在IE9或更早版本中不起作用。

Answer 4

将它分成两个div，如下所示： http://jsfiddle.net/DigitalBiscuits/hUaht/

Answer 5

<fieldset>可以在这里很好地工作，特别是如果文本的宽度是动态的：

<fieldset class="BlackLine">
    <legend>Hello World</legend>
    <div>
        Content
    </div>
</fieldset>

CSS：

fieldset.BlackLine {border-style:none; border-top:solid 5px black;direction:rtl;}
fieldset.BlackLine > legend, fieldset.BlackLine > div {direction:ltr;}

示例：http://jsfiddle.net/XY24Q/

Answer 6

试试这个

<html>
        <head>
            <style>
                .Bat{
                float: left;}
                .Line{
                float: left;
                width:150px;}
                hr{
                height:5px;
                background-color:#444751;}
            </style>
        </head>
            <body>
               <div class="Line">
                  <hr>
               </div>
               <div class="Bat">
                  <b>BATTERIES</b>
               </div>
        </body>
    </html>

使用CSS我怎样才能实现这个结果？

6 个答案: