1

如何创建一个标题如下图所示的内容块？我曾经5px solid #444751做过一些测试，但是我无法将名称与行的右侧和中间对齐。在它们下面，我将放置一个图像。

在此处输入图像描述

4

6 回答 6

1

您可以使用渐变来实现效果。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 或更早版本中不起作用的事实。

于 2012-05-17T15:43:01.727 回答
1

尝试这个：

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


.line {
    border-top:5px solid #444751;
    float:left;
    width:200px;
    margin-top:7px;
    margin-right:5px;   
}
于 2012-05-17T13:33:00.480 回答
1

将文本与条形中心对齐所需的是vertical-align. 看看这个JSFiddle。

这是我使用的 CSS

#bar {
    width: 150px;
    height: 5px;
    background: black;
    display:inline-block;
}
#text{
    text-transform: uppercase;
    display:inline-block;
    vertical-align: -2px;
}
于 2012-05-17T13:34:45.853 回答
0

尝试这个

<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>
于 2012-05-17T13:43:43.673 回答
0

A<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/

于 2012-05-17T13:36:49.280 回答
0

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

于 2012-05-17T13:34:34.807 回答