HTML 및 CSS 탐색 막대 오류

HTML 내비게이션 막대를 만들어야하는 학교 프로젝트를 수행하고 있습니다. & CSS. 나는 다음과 같은 코드를 가지고 있지만, 내가 좋아할만큼 반응이 없다.HTML 및 CSS 탐색 막대 오류

화면을 작게 만들면 텍스트가 더 가까워집니다. p 클래스 사이에 고정 된 공간을 추가하거나 다른 방법으로이 문제를 해결하려면 어떻게해야합니까?

HTML :

이

<!DOCTYPE html> 
<html> 
<head> 
    <title>Header</title> <!-- This is the page title --> 
    <link href="style.css" rel="stylesheet" type="text/css"> <!-- This adds the stylesheet so that "style.css" can edit this page --> 
    <meta content="Hugh Chalmers" name="author"> 
</head> 
<body> 
    <div class="header"> <!-- This will be the Navigation Bar part of the page. Currently, it is invisible, but the CSS will change that. --> 
     <p class="text" id="home">Home</p> 
     <p class="text" id="about">About Us</p> 
     <p class="text" id="contact">Contact Us</p> 
     <p class="text" id="products">Products</p> 
     <p class="text" id="forums">Forums</p> 
    </div> 
</body> 
</html>

CSS :

.header { 
    position: absolute; 
    width: 100%; 
    height: 10%; 
    left: 0; 
    top: 0; 
    background-color: red; 
} 

.text { 
    font-family: font-family: 'PT Sans',sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #fff; 
    position: absolute; 
} 

#home { 
    position: absolute; 
    left: 5%; 
} 

#about { 
    position: absolute; 
    left: 15%; 
} 

#contact { 
    position: absolute; 
    left: 27%; 
} 

#products { 
    position: absolute; 
    left: 40%; 
} 

#forums { 
    position: absolute; 
    left: 53%; 
}

출처

2016-10-13 Hugh Chalmers

입니다 _awful_ 많은'절대적인'포지셔닝은 여러분의 페이지가 성장함에 따라 유지하기위한 진정한 곰이 될 것입니다. 나는 페이지가 당신의 내용을 자연스럽게 약간의 규칙에 따라 흐르게 할 수있는 무언가를 적게하는 것을 고려하는 것이 좋습니다. –

당신은 진짜 지저분한 CSS 스타일을 가지고 있습니다 –

당신은 당신은 p 요소에 display:inline-block을 사용할 수 있습니다,이 작업을 수행 할 position:absolute을 사용할 수 없습니다.

.header { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    background-color: red; 
} 

.text { 
    font-family: font-family: 'PT Sans',sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #fff; 
    display: inline-block; 
    text-align:center; 
    padding: 5px; 
}

당신은 모든 개인 p 스타일을 할 필요가 없습니다.

JSFiddle

출처

2016-10-13 19:26:10 xort

이

CSS와 CSS 스타일을 바꾸기 :

.header { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    background-color: red; 
} 
.text { 
    font-family: font-family: 'PT Sans',sans-serif; 
    font-size: 30px; 
    font-weight: 700; 
    color: #fff; 
} 
.header p { 
    display: inline-block; 
    padding: 0 5px; 
} 

@media (max-width: 480px) { 
    .text { 
    font-size: 1em; 
    font-weight: 350; 
    } 
.header p { 
    display: inline-block; 
    padding: 4px 0; 
    } 
}

출처

2016-10-13 19:31:39

하지만 화면 크기가 감소함에 따라 목록 항목이 사라집니다. 어떻게 해결할 수 있을까요? –

[미디어 쿼리] (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)에 대해 알아볼 필요가 있습니다. 문제를 해결하기 위해 미디어 쿼리로 내 대답을 편집했습니다. @HughChalmers –

[This] (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)는 각 장치에 대해 지정해야하는 크기를 찾는 데 유용한 리소스입니다. 그러나, 나는 거의 항상 한 크기로 만져왔다. 그것은 정말로 당신의 HTML과 CSS가 어떻게 구조화되어 있고 어떤 위치, 단위 등을 사용하고 있는지에 달려 있습니다. – vladdobra

탐색 줄은, 정말, 무슨 탐색 모음은 옵션 목록을 (표현하도록되어있는 경우 그렇다면, 목록을 사용하는 것이 의미 론적으로 더 의미가 있습니다. 순서는별로 중요하지 않기 때문에, 우리는 정렬되지 않은 목록 <ul> 사용하십시오 : 다음 수평으로 표시 한 다음

<div class="header"> 
    <ul> 
     <li class="text" id="home">Home</li> 
     <li class="text" id="about">About Us</li> 
     <li class="text" id="contact">Contact Us</li> 
     <li class="text" id="products">Products</li> 
     <li class="text" id="forums">Forums</li> 
    </ul> 
</div>

를, 그것은 그들을 부동, 또는 디스플레이 모드를 변경하거나 간단한 문제입니다. 나는 후자를 선호 :

.header ul li 
{ 
    display: inline-block; 
}

당신의 CSS의 약간 불통 버전 예 : https://jsfiddle.net/L0pb47ms/

출처

2016-10-13 19:38:59

하는 이들로 HTML과 CSS 스타일을 바꾸기 :

ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: red; 
 
} 
 

 
ul.topnav li {float: left;} 
 

 
ul.topnav li a { 
 
    display: block; 
 
    font-size: 30px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
ul.topnav li a:hover:not(.active) {background-color: #111;} 
 
ul.topnav li.right {float: right;} 
 

 
@media screen and (max-width: 400px){ 
 
    ul.topnav li.right, 
 
    ul.topnav li {float: none;} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link href="style.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
<ul class="topnav"> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <li><a href="#about">About</a></li> 
 
</ul> 
 

 
</body> 
 
</html>

출처

2016-10-13 20:40:22

HTML 및 CSS 탐색 막대 오류

답변

관련 문제