Странное поведение внешней таблицы стилей

Итак, у меня есть внутренний CSS между тегами стиля в <head>, и я решил переместить его во внешний файл CSS, а затем использовать простую ссылку. Так вот, если я использую внешний CSS, один плавающий элемент переходит к следующей строке, а во внутреннем - этого не происходит. Внутренняя и внешняя таблицы стилей идентичны, и я копировал их и вставлял их во внешний файл.
Я уже перепроверял 10 раз, что они идентичны. Единственное различие заключается в том, что один является внутренним, а другой внешним.
Почему это происходит (внимательно посмотрите на скачку h2)Странное поведение внешней таблицы стилей

<!DOCTYPE html> 
<html> 
<head> 
    <title>helo</title> 
    <style> 
     body, div, h1, h2, form 
     { 
      border:0; 
      margin:0; 
      padding: 0; 
     } 

     div.nav 
     { 
      height: 70px; 
      left: 0; 
      position: fixed; 
      top: 0; 
      width: 100%; 
     } 

     div.nav_body 
     { 
      box-sizing: border-box; 
      margin: 0 auto; 
      max-width: 1330px; 
      min-width: 920px; 
      padding: 0 20px; 
      width: 100%; 
     } 

     div.nav_body h2 
     { 
      float: right;    
     } 

     div.nav_body h2 a 
     { 
      font-size: 14px; 
      line-height: 70px; 
     } 

     div.nav_body h1 a 
     { 
      font-size: 32px; 
     } 

     div.nav_body h1 
     { 
      display: inline-block; 
      margin-right: 20px; 
     } 

     div.form_container 
     { 
      margin-top: 70px; 
     } 
    </style> 
</head> 
<body> 
    <div class='nav'> 
     <div class='nav_body'> 
      <h1><a href='#'>welcome</a></h1> 
      <h2><a href='#'>register</a></h2> 
     </div> 
    </div> 
    <div class='form_container'> 
     <div class='form_header'> 
      <h1>register</h1> 
     </div> 

     <a href='forgot_password.php'>forgot</a> 

     <div class='form_field'> 
      <form> 
       <input type='text' name='email' placeholder='Email' /> 
       <input type='password' name='password' placeholder='Password' /> 
       <input type='submit' value='log in' /> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

источник

2015-01-11 Core_dumped

надстройкой ваш код с вопросом – Mobitips

попробуйте сохранить ваши файлы и убедитесь, что в настоящий момент вы импортируете внешний файл ле. Код также поможет нам, поможет вам –

Я попытаюсь добавить код через минуту –

Он работает с внешним CSS

Ваш HTML файл

<!DOCTYPE html> <html> 
<head> 
    <title>helo</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
    <div class='nav'> 
     <div class='nav_body'> 
      <h1><a href='#'>welcome</a></h1> 
      <h2><a href='#'>register</a></h2> 
     </div> 
    </div> 
    <div class='form_container'> 
     <div class='form_header'> 
      <h1>register</h1> 
     </div> 

     <a href='forgot_password.php'>forgot</a> 

     <div class='form_field'> 
      <form> 
       <input type='text' name='email' placeholder='Email' /> 
       <input type='password' name='password' placeholder='Password' /> 
       <input type='submit' value='log in' /> 
      </form> 
     </div> 
    </div> 
</body> 
</html>

CSS:

body, div, h1, h2, form 
     { 
      border:0; 
      margin:0; 
      padding: 0; 
     } 

     div.nav 
     { 
      height: 70px; 
      left: 0; 
      position: fixed; 
      top: 0; 
      width: 100%; 
     } 

     div.nav_body 
     { 
      box-sizing: border-box; 
      margin: 0 auto; 
      max-width: 1330px; 
      min-width: 920px; 
      padding: 0 20px; 
      width: 100%; 
     } 

     div.nav_body h2 
     { 
      float: right;    
     } 

     div.nav_body h2 a 
     { 
      font-size: 14px; 
      line-height: 70px; 
     } 

     div.nav_body h1 a 
     { 
      font-size: 32px; 
     } 

     div.nav_body h1 
     { 
      display: inline-block; 
      margin-right: 20px; 
     } 

     div.form_container 
     { 
      margin-top: 70px; 
     }

источник

2015-01-11 10:40:17 Mobitips

look на register, он переходит к следующей строке –

ok дайте мне посмотреть ... – Mobitips

теперь он дает тот же результат с внешним и внутренним (отредактированным) – Mobitips

Странное поведение внешней таблицы стилей

ответ

Смежные вопросы