2 개의 링크를 수직으로 표시하는 방법은 무엇입니까?

StackOverflow https://stackoverflow.com/questions/2409290

문제

두 개의 링크를 수직으로 표시하는 방법은 무엇입니까? 콘텐츠 페이지에서 (내비게이션이 아님).

이것은 (총알이 필요하지 않지만)

<p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
   when an unknown printer took a galley of type and scrambled it to make a 
   type specimen book.
</p>
<ul>
   <li><a href="#">Link 1</a></li>
   <li><a href="#">Link 2</a></li>
</ul>

이것

<p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
   when an unknown printer took a galley of type and scrambled it to make a 
   type specimen book.
</p>
<p><a href="#">Link 1</a></p>

<p><a href="#">Link 2</a></p>

아니면 이거 

<p>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
   Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
   when an unknown printer took a galley of type and scrambled it to make a 
   type specimen book.
</p>
<p> <a href="#">Link 1</a> 
    <br />
   <a href="#">Link 2</a>
</p>
도움이 되었습니까?

해결책

프리젠 테이션 목적으로 어떤 마크 업을 사용할 것인지 걱정해서는 안됩니다. 이것이 바로 CSS의 것입니다. 위에서주는 모든 예제는 원하는이지만 쉽게 볼 수있는 스타일이 될 수 있습니다. 당신이 결정해야 할 것은 내용이 무엇인지입니다 ~이다 적절하게 표시하십시오.

마크 업은 내용을 설명합니다. 이것은 그룹에 의미가있는 링크 목록입니까? 그런 다음 마크 업이 관련 사항 목록을 설명하므로 목록을 사용하십시오. 링크가 콘텐츠와 관련이 있습니까? 그런 다음 목록을 목록으로 사용하지 마십시오. 목록은 상관 관계를 의미합니다.

의미론은 주관적인 성격으로 인해 때때로 결정하기가 어렵습니다. 그것은 당신이 실제로 당신의 콘텐츠를 의미 적으로 마킹하려고 시도한 다음, 프리젠 테이션 요구에 CSS를 사용해야한다고 말합니다.

다른 팁

그것은 전적으로 상황에 따라 다릅니다, imo. 링크가 메뉴에 있으면 변절되지 않은 목록 접근법을 사용합니다. 그들이 논리적으로 분리되어 있다면, 나는 그들을 자신의 용기에 넣었습니다. 그들이 논리적으로 관련되어 있지만 나는 단지 그들 자신의 라인에서 그들을 원한다면 아마도 CSS로 요소를 차단하고 적절하게 스타일링 할 것입니다. 일반적으로 BR 태그를 피할 것입니다.

의미 적으로, 더 쉬운 스타일을 위해 첫 번째 옵션을 사용합니다.

총알 포인트를 원하지 않는다면 스타일 LI 그들없이 (list-style-type:none).

내가 말할 것

<ul style="list-style-type: none">
   <li><a href="#">Link 1</a></li>


   <li><a href="#">Link 2</a></li>
</ul>

나는 목록 태그 아래에있는 것을 선호합니다. 저에게는 훨씬 깨끗한 코드이며 양식에 쉽게 배치 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top