Question

我有一个标题，我想要前后的行。我已经实现了这一点，但他们目前还没有响应...所以当我让我的屏幕变小时，他们会进入新的线路等它的可怕。我只是希望线条在屏幕上变小......

这是我到目前为止所尝试的内容：

h2:after {
display: inline-block;
margin: 0 0 8px 20px;
height: 3px;
content: "";
text-shadow: none;
background-color: #E0E0E0;
max-width: 100%;
}

h2:before {
display: inline-block;
margin: 0 20px 8px 0;
height: 3px;
content: "";
text-shadow: none;
background-color: #E0E0E0;
max-width: 100%;
}

一旦我转动宽度：100％到最大宽度，我的线就会消失。

Answer 1

＆＃13;

header {
    display:table;
    width:100%;
    max-width:100%;
}
header div {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap;
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
    width:1px;
    table-layout:fixed;
}
header span.spacer {
    display:table-cell;
}
header h1 {
    padding:0 10px;
}
header span.spacer:after {
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
	background-color:#F00;
}

＆＃13;

<header><div><span class="spacer"></span><h1>Header</h1><span class="spacer"></span>

＆＃13;

响应之前＆amp;后排

1 个答案: