Question

我试图在我的标题上划一条线，在我的`副标题

之前和之后均匀排列

我看了两个参考文献：

这些帮助我开始，但我不知道即使标题或副标题的长度，即使使用前后行也没有包装，如何获得顶线。

<div class="title">
<h1>Testingtesting</h1>
</div>
<div class="sub-title">
<h1>Testing</h1>
</div>

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
h1 {
width: 20%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .1em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .1em;
}
span {
display: inline-block;
vertical-align: middle;
}
.title h1 {
border-top: 1px solid black
}
.title h1:before, .title h1:after {

border-bottom: 0px solid;
}

</style>

Answer 1

你应该使用white-space：wrap;它应该在使用它之后工作，因为你在设置它的元素上设置了宽度。

例如，

}

.title h1:after {
    content:"\A"; 
    white-space: pre; 
}

<强>解释

在CSS中：after用于生成一些称为伪元素的内容。如果保留空白区域，“\ A”被解释为换行符，因此您需要设置white-space：pre。最后，元素必须是内联的，因此显示：inline。

Answer 2

我相信我能够使用flexbox完成你想要的任务。 TL; DR：请参阅下面的代码段。

首先，我在HTML中嵌套div.sub-title内的div.title。

然后，我将div.title转换为带display: flex的弹性容器，并将流向设置为column。添加align-items: center使容器中的元素居中。

接下来，我定位了第一个h1元素，添加了border-top和border-bottom。你可以随心所欲地制作它 - 我放4px。如果要添加或缩小边框与标题之间的间距，请调整padding。

然后我将div.sub-title容器作为目标。我给了它position relative，然后用top: -45px垂直偏移它的位置。您可能希望调整此值以使其以您希望的方式居中。我应用零line-height来删除标题上相当高的默认值。要调整子标题和两侧的行之间的间距，请将padding添加到div.sub-title - 我使用了20px。最后，添加与您网页背景相匹配的背景颜色。

虽然这有效，但它在很大程度上取决于您能够使用多少预先定义的值（例如padding和background-color）。

另外需要注意的是，当屏幕宽度太小，字幕包裹时，它看起来真的很难看。这是由于line-height设置为零。要解决此问题，您可以在min-width上设置div.title以防止整个容器低于某个宽度，或者使用媒体在某个断点处重置line-height中的div.sub-title查询。

＆＃13;

.title {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  min-width: 350px;
}
.title > h1 {
  display: inline;
  padding: 30px 0;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  text-align: center;
}
.sub-title {
  position: relative;
  top: -45px;
  
  /* reset this w/ a media query when screen size gets too small */
  line-height: 0px;
  
  padding: 0 20px;
  background-color: #fff;
}

＆＃13;

<body>

  <div class="title">
    <h1>Tomorrow Or Something Longer</h1>
    <div class="sub-title">
      <h1>Today or something</h1>
    </div>
  </div>

</body>

＆＃13;

甚至是标题和字幕前后的行

2 个答案: