목록 항목을 링크로 만들기

HTML의 목록 항목에 대해 질문 할 질문이 있습니다. 나는 해답을 찾았지만 내 문제에 대해 일하는 사람을 찾지 못했습니다. 목록 항목을 링크로 만들기

ul { 
 
\t margin: 0 auto; 
 
\t padding: 0px; 
 
\t list-style-type: none; 
 
} 
 

 
li { 
 
\t width: 25%; 
 
\t display: inline; 
 
\t float: left; 
 
\t text-align: center; 
 
} 
 

 
a { 
 
\t display: block; 
 
\t font-size: 32px; 
 
\t width: 140px; 
 
\t background-color: #A0A0A0; 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
\t color: #282828; 
 
} 
 

 
.navbardiv { 
 
\t margin: 0px; 
 
\t background-color: #A0A0A0; 
 
\t height: 50px; 
 
} 
 

 
a:link,a:visited { 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
} 
 

 
a:hover,a:active { 
 
\t background-color: #B8B8B8; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css"> 
 
</head> 
 
<body> 
 
<div class="navbardiv"> 
 
<ul> 
 
<li><a href="Page1.html">Home</a></li> 
 
<li><a href="Page2.html">Forum</a></li> 
 
<li><a href="Page3.html">Videos</a></li> 
 
<li><a href="Page4.html">Contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

그래서 내 문제가 무엇인지, 내가 전체 목록 링크가, 내가 그들에 단락과 링크 내에서 만드는 예는 시도 항목하지만하셨습니까을 어떻게 ' 일하지 마라. 내 글꼴의 글꼴과 크기를 정확하게 유지하려고합니다. 그래서 내가 찾은 답변이 없습니다. 그래서 내 질문에 대답 해 주시면 크게 감사하겠습니다.

미리 감사드립니다.

출처

2014-12-05 azy19

현재 솔루션에 어떤 문제가 있습니까? 당신은 당신의 연결 사이 간격을 원하지 않는다? – Zeta

@ Zeta 어떤 이유로 나는 절을 링크처럼 보이게 할 수 없습니다. – azy19

@Zeta 예 내 링크 사이에 간격이 필요하지 않습니다. – azy19

가장 쉬운 해결책 (즉, 코드 변경이 가장 적은 솔루션) a 태그의 width을 100%으로 변경하는 것이 가장 쉬운 해결책입니다. 그러나 다른 답변에서 제안 된대로 nav 태그를 사용하도록 HTML 구조를 변경하는 것을 고려해야합니다.

는

ul { 
 
\t margin: 0 auto; 
 
\t padding: 0px; 
 
\t list-style-type: none; 
 
} 
 

 
li { 
 
\t width: 25%; 
 
\t display: inline; 
 
\t float: left; 
 
\t text-align: center; 
 
} 
 

 
a { 
 
\t display: block; 
 
\t font-size: 32px; 
 
\t width: 100%; 
 
\t background-color: #A0A0A0; 
 
\t font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
\t color: #282828; 
 
} 
 

 
.navbardiv { 
 
\t margin: 0px; 
 
\t background-color: #A0A0A0; 
 
\t height: 50px; 
 
} 
 

 
a:link,a:visited { 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
} 
 

 
a:hover,a:active { 
 
\t background-color: #B8B8B8; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="TestSiteCSS.css"> 
 
</head> 
 
<body> 
 
<div class="navbardiv"> 
 
<ul> 
 
<li><a href="Page1.html">Home</a></li> 
 
<li><a href="Page2.html">Forum</a></li> 
 
<li><a href="Page3.html">Videos</a></li> 
 
<li><a href="Page4.html">Contact</a></li> 
 
</ul> 
 
</div> 
 
</body> 
 
</html>

출처

2014-12-05 08:04:53 icke

이 답변은 모범 사례와 꽤 거리가 있습니다. : – Zaqx

그렇기 때문에 답안에서 제안한대로 'nav'태그를 사용해야한다고 썼습니다. – icke

귀하의 솔루션은 다음과 같습니다.

HTML/CSS를 어디서 배웠습니까?

* { margin:0; padding:0 } 
 

 
nav { 
 
    background: grey; 
 
} 
 

 
nav a { 
 
    color: initial; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 4px; 
 
    margin: 10px 0; 
 
} 
 

 
nav a:hover { 
 
    background: lightgrey; 
 
}

<nav> 
 
    <a href="Page1.html">Home</a> 
 
    <a href="Page2.html">Forum</a> 
 
    <a href="Page3.html">Videos</a> 
 
    <a href="Page4.html">Contact</a> 
 
</nav>

출처

2014-12-05 08:05:03 Zaqx

저는 지금 제 자신을 가르치고 있지만 대학에 갈 때 나는 목표로하고 있습니다. 운 좋게도 내 도시에는 하나의 친구가 있습니다. 내 친구 몇 명은 보통 휴식과 코드 사이트에 있습니다. 그래서 나는 아주 나 빠졌지 만 모두가 어딘가에서 시작해야만합니까? – azy19

당신이 ' 다시 배우십시오. https://dash.generalassemb.ly/ 초보자에게 HTML/CSS를 가르치기 위해 본 최고의 사이트를 확인하십시오. 무료로 계정을 만들어야합니다. 많이 배울 것이고 훨씬 더 좋을 것입니다. 이러한 개념에 대한 이해. 행운을 빌어 요 :) – Zaqx

간단히 폭을 추가 : 100 %; 귀하의 {} 선택기에서와 같이

a { 
    display: block; 
    font-size: 32px; 
    width: 100%; /* instead of 140px; */ 
    background-color: #A0A0A0; 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    color: #282828; 
}

출처

2014-12-05 08:12:10

목록 항목을 링크로 만들기

답변

관련 문제