수평선과 html, css로 코딩하는 올바른 방법

122

블록 뒤에 수평선을 그려야하는데 세 가지 방법이 있습니다.

1) 클래스를 정의하고 h_lineCSS 기능을 추가 하십시오.

#css
.hline { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <div class="h_line"></div>

2) hr태그 사용

#css
hr { width:100%; height:1px; background: #fff }

#html
<div class="block_1">Lorem</div> <hr />

3) after의사 클래스 처럼 사용

#css
.hline:after { width:100%; height:1px; background: #fff; content:"" }

#html
<div class="block_1 h_line">Lorem</div>

어떤 방법이 가장 실용적입니까?

html css

— Павел Тявин
소스

2

<hr>가장 의미 론적 이라고 생각합니다 . 내 말은, 그것이 의미하는 바가 아닙니까?

— j08691 2013

3

왜 사용하지 border-bottom않습니까?

— jsweazy 2013

3

HTML5에서 HTML <hr> 요소는 단락 수준 요소 사이의 주제별 구분을 나타냅니다 (예 : 스토리의 장면 변경 또는 섹션으로 주제 이동).

— Scott Simpson

138

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

스 니펫 확장

html5boilerplate 가 수행 하는 방법은 다음과 같습니다 .

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

— 모 팅거
소스

3

참고 : 사용 margin: 1em auto당신이 항상 페이지 중앙에 있어야합니다.

— Jacques Marais

1

@JacquesMarais, 정의 된 너비가없는 블록 요소이므로 필요하지 않습니다. 그래도 전체 컨테이너의 너비에 걸쳐 있습니다.

— moettinger

65

시맨틱 마크 업을 사용하고 <hr/>.

원하는 테두리가 아니라면 패딩, 테두리 및 여백의 조합을 사용하여 원하는 경계를 얻을 수 있습니다.

— 베바 쿠아
소스

8

<hr>유효한 HTML5입니다. 사용 된 것은 수평 규칙을 나타내지 만 이제는 콘텐츠 간의 주제 구분으로 의미 론적 용어로 정의됩니다. 대부분의 브라우저는 달리 언급하지 않는 한 가로줄로 표시합니다. 출처 : developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

— AJMaxwell

제목은 수평선이고 <hr />은 저것이므로 이쪽을 올립니다. 제목은 스타일이 지정된 가로줄이어야합니다.

— Ryan Bayne

11

HTML5에서 <hr>태그는 주제별 구분을 정의합니다. HTML 4.01에서 <hr>태그는 수평 규칙을 나타냅니다.

http://www.w3schools.com/tags/tag_hr.asp

따라서 정의 후에는 <hr>

— Bpoiss
소스

10

정말로 주제별 휴식을 원한다면 반드시 <hr>태그를 사용하십시오 .

디자인 라인 만 원한다면 css 클래스와 같은 것을 사용할 수 있습니다.

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #000; /* whichever color you prefer */
}

다음과 같이 사용하십시오.

<div class="block_1 hline-bottom">Cheese</div>

— serv-inc
소스

5

선과 같은 긴 대시를 원했기 때문에 이것을 사용했습니다.

.dash{
        border: 1px solid red;
        width: 120px;
        height: 0px;

}

<div class="dash"></div>

스 니펫 확장

— 알리아
소스

5

.line {
  width: 53px;
  height: 0;
  border: 1px solid #C4C4C4;
  margin: 3px;
  display:inline-block;
}

<html>
<body>
<div class="line"></div>
<div style="display:inline-block;">OR</div>
<div class="line"></div>
</body>
</html>

스 니펫 확장

— 나딤 카스미
소스

"가장 실용적인 것이 무엇입니까?"라는 질문에 대답하지 않았습니다.

— Brian Tompsett-汤莱恩

1

내 간단한 해결책은 CSS로 hr 스타일을 지정하여 상단 및 하단 여백, 테두리 0, 높이 1 픽셀 및 대비되는 배경색을 갖도록하는 것입니다. 스타일을 직접 설정하거나 클래스를 정의하여 수행 할 수 있습니다. 예를 들면 다음과 같습니다.

.thin_hr {
margin-top:0;
margin-bottom:0;
border:0;
height:1px;
background-color:black;
}

— FredG
소스

1

요구 사항에 따라 다르지만 많은 개발자들이 코드 를 가능한 한 간단 하게 만드는 것이 좋습니다. 따라서 간단한 "hr"태그와 CSS 코드를 사용하십시오.

— Ram Prasad
소스

0

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

<div>Hello</div>
<hr/>
<div>World</div>

스 니펫 확장

강조된 텍스트

— 브루
소스

귀하의 답변을 설명하는 의견을 추가하십시오.

— Barthy

0

이것은 비교적 간단한 예이며 나를 위해 일했습니다.

hr {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

리소스 : https://www.w3docs.com/snippets/css/how-to-style-a-horizontal-line.html