Question

我正在我的网站上工作，我想在页面标题的右侧有一条水平线。目前这是我的标题，剥离的CSS的代码。

#wrapper #content-holder #main-content #newhead {
margin-top: 0px;
margin-right: -0x;
margin-bottom: 0px;
margin-left: 0px;
font-family: 'Rokkitt', 'Lucida Grande', Helvetica, Arial, sans-serif;
font-size: 40px;
color: #333;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: 600;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
letter-spacing: -2px;
/*text-transform: uppercase;
border-bottom:1px solid #15A2FF;*/
}

旁边：

<div id="newhead"><?php the_title(); ?></div>

但由于某些原因，我无法在标题文本旁边显示这些行。

请帮忙。 http://jsbin.com/ILOlivI/1/edit

Answer 1

如果你试图用文本的中线放入一个水平线，那么border-bottom是不是真的会起作用呢？

离开我的头顶我将使用单个像素.gif图像拉伸到剩余空间的100％并对齐到文本的中间...或者如果你想像素完美对齐到特定的文字大小，使用1px宽的.gif文件，其中包含您的行，加上下面的x个透明像素。

您可以引入SVG线，或在文本旁边浮动DIV，半高，边框顶部或底部。如果你想留在纯CSS / HTML中，DIV解决方案可能会最有意义。

Answer 2

我想我会在标题行中使用背景图像，该背景图像被文本的背景颜色覆盖。像这样：

  <div id="newHead"><div>the header text</div></span>

  #newHead {
    background: white url(http://tidesonline.nos.noaa.gov/images/black_line.jpg) center left repeat-x;
  }
  #newHead div {
    background-color: white;
    display: inline-block;
    padding-right: 10px;
  }

这是一个jsfiddle示例：http://jsfiddle.net/mVqY6/

仅当文本不太长并且文本位于背景图像上时才会起作用。在这种情况下，你需要做一些调整。

标题右侧的水平线

2 个答案: