이것은 아마도 간단한 질문이지만 두 개의 라인

어떻게 어떤 headling 태그를 사용하여 제목을 만들 수 있지만이 같은 라인 사이의 제목 원하는 :

HTML :를

<h4>Staging Server</h4>

그림 :

sample

출처

2015-01-06 Alex

[CSS가있는 헤더 옆에 한 줄 추가] (http://stackoverflow.com/questions/20198769/add-a-line-next-to-a-header-with-css) –

:after 및 :before : 의사 요소를 사용할 수 있습니다.

h4 span { 
 
    position: relative; 
 
    color: #00C8FF; 
 
    padding: 0 15px; 
 
    margin: 0 80px; 
 
    font-size: 16px; 
 
    font-weight: 100; 
 
} 
 
h4 span:before, h4 span:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 60%; 
 
    height: 1px; 
 
    transform: translateY(-50%); 
 
    top: 50%; 
 
    background: #6F6F6F; 
 
    left: -60%; 
 
} 
 
h4 span:after { 
 
    left: 100%; 
 
}

<h4><span>Staging Server</span></h4>

출처

2015-01-06 23:10:01

@ Alex - 당신은 환영합니다. :) –

구글에 그대로 첫 번째 결과 ...

body 
 
{ 
 
    background-color: black; 
 
    color: white; 
 
} 
 
.subtitle { 
 
    margin: 0 0 2em 0; 
 
} 
 
.fancy { 
 
    line-height: 0.5; 
 
    text-align: center; 
 
} 
 
.fancy span { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.fancy span:before, 
 
.fancy span:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 5px; 
 
    border-bottom: 1px solid white; 
 
    border-top: 1px solid white; 
 
    top: 0; 
 
    width: 600px; 
 
} 
 
.fancy span:before { 
 
    right: 100%; 
 
    margin-right: 15px; 
 
} 
 
.fancy span:after { 
 
    left: 100%; 
 
    margin-left: 15px; 
 
}

<p class="subtitle fancy"><span>A fancy subtitle</span></p>

는 here에서 촬영.

출처

2015-01-06 23:09:35 Shahar

<fieldset style="border:none; border-top: 1px solid #999;"> 
    <legend style="text-align:center;"> Staging Server </legend> 
</fieldset>

http://jsfiddle.net/3qcpjgxw/

출처

2015-01-06 23:15:12 ceadreak

또한 전설은 완전히 스타일링 될 수 있습니다 ... 간단하고 우아한 +1 플러스 다음에 올 어쨌든 컨테이너입니다 – fnostro

필드 그룹과 범례는 일반 콘텐츠 헤더로 사용하기위한 것이 아니라 양식. 당신은 제목 태그의 SEO 혜택을 상실하고 코드를 혼란스럽게 만듭니다. 화면 판독기를 혼동시킬 수도 있지만 잘 모르겠습니다. 이것은 필드 그룹/범례 IMO의 오용입니다. OP는 구체적으로 "모든 제목 태그 사용"도 요청했습니다. 나는 이것을 제목으로 추천하지 않는다. –

예 및 아니오, 일반적으로 후속 내용이없는 제목은 없으며이 경우에는 "준비 서버"의 통계 일 가능성이 높습니다. * 반드시 일련의 필드 및 레이블이어야합니다. 나 자신을 위해 ASP.NET을 사용하여 작업하는 경우 일반적으로 하나의 형식 만 존재합니다. 그러나 조직적이고 구획화가 필요한 통제가 많이 필요하며, 저에게는 fieldset/legend가이를위한 훌륭한 도구입니다. – fnostro

간단한 예는 다음과 같을 수

<hr><h4>Staging Server</h4><hr>

그리고 약간의 CSS의 팅겨 :

hr, h4 { 
    display:inline-block; 
} 

hr { 
    width:30%; 
}

출처

2015-01-06 23:19:32

이것은 아마도 간단한 질문이지만 두 개의 라인

답변

관련 문제