如何使用CSS的标题（H1与两侧的线条） [英] How to make the headline (H1 with lines on the sides) with CSS only

问题描述

我已经对我需要的标题做了一些小提琴。

CSS：

  body {
 background：url（http： /subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png）; 
} 
 
 .main-container {
 width：600px; 
 margin：0 auto; 
 box-shadow：0 0 5px＃d00; 
} 
 
 .headline {
 display：inline-block; 
 margin：40px 0; 
 padding：0 30px; 
 font：normal 33px / 1.1格鲁吉亚，Times New Roman，Times，serif; 
 color：＃3E3E3E; 
 height：1px; 
 border-left：300px solid #aaa; 
 border-right：300px solid #aaa; 
 white-space：nowrap; 
} 
 
 .headline> span {
 display：block; 
 margin-top：-17px; 
} 
  

HTML：

 < div class =main-container> 
< h1 class =headline>< span>我们最新的工作< / span>< / h1> 
< / div> 
  

这不是完整的解决方案，因为我使用的文本边框，父容器。

有其他方法吗？但没有额外的div和JS。

PS：背景图片可能不同，所以我已经尝试把相同的bg下的文本，但它不是解决方案。 / p>

PPS：div.main-container不能包含overflow：hidden

解决方案

我想出了这样的 http://jsfiddle.net/olgis/qkNfm/ ，类似于@GionaF解决方案，只是没有固定的宽度，但仍然需要一个容器来获得文本下面的红线。

据我了解，您的解决方案标准是：

• li>
  
• 无JavaScript或jQuery


• css流体布局（不固定宽度）


• 最小HTML


• 跨浏览器解决方案

在此帖子 http://www.impressivewebs.com/centered-heading-horizo​​ntal-line/ ，他们正在讨论居中标题重叠水平Line with CSS很多不同的解决方案以及跨平台问题。

我的猜测是你的目标是这样的 http://result.dabblet.com/gist/1560674
a整洁的解决方案只有一个H1。

I have made some a fiddle of such a headline that I need.

CSS:

body {
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
}

.main-container {
    width: 600px;
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
}

.headline {
    display: inline-block;
    margin: 40px 0;
    padding: 0 30px;
    font: normal 33px/1.1 Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
    height: 1px;
    border-left: 300px solid #aaa;
    border-right: 300px solid #aaa;
    white-space: nowrap;
}

.headline > span {
    display:block;
    margin-top:-17px;
}

HTML:

<div class="main-container">
    <h1 class="headline"><span>OUR LATEST WORKS</span></h1>
</div>

This is not the full solution, because I use the borders around the text that push out the text from the parent container.

Is there any other ways to do it? But without additional divs and JS.

PS: The background image may be different, so I already try to put the same bg under the text but it's not the solution.

PPS: The "div.main-container" must no contain the overflow:hidden

解决方案

I came up with something like this http://jsfiddle.net/olgis/qkNfm/, similar to @GionaF solution just without fixed width, but still you will need a container to get red line underneath the text.

As I understand your criteria for solution is:

• any background
• NO JavaScript or jQuery
• css liquid layout (NO fixed width)
• minimal HTML
• cross browser solution

In this post http://www.impressivewebs.com/centered-heading-horizontal-line/, they are discussing "Centered Heading Overlaying a Horizontal Line with CSS" a lot of different solutions as well as a cross platform issue.

My guess would be you are aiming for something like this http://result.dabblet.com/gist/1560674 a neat solution with just one H1 .

这篇关于如何使用CSS的标题（H1与两侧的线条）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！