양식 태그 속보 탐색 모음

좋아, 그럼 기본 스타일 시트 (아래 코드)와 기본 헤더 navbar가 있습니다. 이 헤더 아래에 양식이 포함되어 있습니다. 이제 이것은 양식을 연습하는 유일한 방법이지만 버그를 발견했습니다. 양식 태그를 포함 시키면 Navbar가 깨지지만 Chrome에서만 보입니다. 여기에서는 몇 가지 사진을 보여 드리겠습니다. 폼 태그와양식 태그 속보 탐색 모음

: https://puu.sh/en5BJ/467d02010d.png

없이 : https://puu.sh/en5GV/a0473c44e2.png

지금 변화가/링크를 차단하는 것은 절대적으로 배치됩니다. 나는 이것을 top : 0으로 풀 수 있다는 것을 안다. 하지만 왜 이런 일이 일어나는지 먼저 알아보고 싶습니다. 누구든지이 문제에 대해 어떤 생각을 가지고 있습니까?

고맙습니다!

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>Settings</title> 
    <link rel="stylesheet" type="text/css" href="../css/style.css"> 
    <link rel="stylesheet" type="text/css" href="Settings.css"> 
</head> 
<body> 
<div class="page"> 

    <div class="header"> 
    <ul> 
     <li><a href="../index.html">Home</a></li><!-- 
     --><li><a href="../Gallery/Gallery.html">Gallery</a></li><!-- 
     --><li><a href="../About/About.html">About</a></li><!-- 
     --><li><a href="../Contact/Contact.html">Contact</a></li><!-- 
     --><li><a href="../Settings/Settings.html" class="active">Settings</a></li> 
    </ul> 
    </div> 

    <div class="form"> 
    <form action="" method="get"> 
     <ul> 
      <li> 
       <label for="username">Enter username:</label> 
       <input type="text" name="username" id="username"> 
      </li> 
     </ul> 
    </form> 
    </div> 

    <div class="footer"> 
    </div> 
</div> 
</body> 
</html> 

* {vertical-align: top;} 
body {margin: 0;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;} 
.page {width: 90%;margin: auto;} 
a {color: black;display: inline-block;} 

.header { 
    background-color: darkgray; 
    text-align: center; 
    position: relative; 
    margin-bottom: 1%; 
} 

.header ul {margin: 0;padding: 0;} 
.header li { 
    display: inline-block; 
    line-height: 65px; 
    position: relative; 
    right: 10%; 
} 

.header a { 
    font-weight: bold; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 80%; 
    padding: 10px 15px 0px 15px; 
} 
.header li:hover {background-color: white;} 
.header li:last-child {position: absolute;right:0;} 
.header .active {background-color: white;} 
.footer {background-color: darkgray;width: 100%;height:50px;margin-top: 1%}

출처

2015-01-11 Russ

은 [무슨 잘못?] (http://jsfiddle.net/wt8kw8fx/는) – lolbas

사본 및 jsbin하도록 코드 붙여 넣기는 .. http://jsbin.com/nequpiheva/1/ 아마 캐시 확률값이 좋아 보인다 당신의 브라우저에? strg + r을 눌러 – cari

허 .. 최신 Chrome 버전 40.0.2214.69 베타 -m (64 비트)을 다시로드하십시오. 중요한 변경 사항이 있는지 확인하기 위해 기록 및 사물을 지 웁니다. – Russ

이 CSS를 사용하여 CSS를 다시 작성하십시오.

* {vertical-align: top;} 
body {margin: 0;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;} 
.page {width: 90%;margin: auto;} 
a {color: black;display: inline-block;} 

.header { 
    background-color: #A9A9A9; 
    text-align: center; 
    position: relative; 
    margin-bottom: 1%; 
    float: left; 
    width: 100%; 
} 
.header ul {margin: 0;padding: 0;} 
.header li { 
    display: inline-block; 
    line-height: 65px; 
    position: relative; 
    right: 10%; 
} 

.header a { 
    font-weight: bold; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-size: 80%; 
    padding: 10px 15px 0px 15px; 
} 
.header li:hover {background-color: white;} 
.header li:last-child {float:right;right:0;} 
.header .active {background-color: white;} 
.form{float:left; width:100%} 
.footer {background-color: darkgray;width: 100%;height:50px;margin-top: 1%; float:left;}

출처

2015-01-11 15:35:26 anji

양식 태그 속보 탐색 모음

답변

관련 문제