HTML和CSS文件未链接

Question

I have the following css and html files. 我有以下CSS和HTML文件。

 html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, th, td, article, aside, canvas, details, figcaption, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { font-family: "HelveticaNeue", Arial, Helvetica, sans-serif } #tab-bar { background: #050405; border-bottom: 1px #441d22 solid; position: relative; } /* Clearfix to stop our floats escaping */ #tab:before, #tab-bar:after { content: "\\0020"; display: block; height: 0; overflow: hidden; } #tab-bar:active { clear: both; } /* Float our three list items so they're evenly spaced */ #tab-bar li { display: inline; float: left; width: 33.333%; } /* Set a elements as blocks */ #tab a { color: #cdcdcd; display: block; font-size: 0.875em; /* 12px / 14px */ font-weight: bold; height: 4.583em; /* 55px / 12px */ margin: 0 0.833em; /* 10px / 12px*/ overflow: hidden; padding-top: 1.428em; /* 6px / 14px */ position: relative; text-align: center; text-decoration: none; }

 <!DOCTYPE html> <!--[if IEMobile 7]><html class="no-js iem7"><[endif]--> <!--[if (gt IEMobile 7)|!(IEMobile)]]><!-->html class="no-js">!--<![endif]--> <html> <head> <meta charset="utf-8" /> <title>StarTrackr</title> <link rel="stylesheet" href="screen.css" type="text/css" media="screen" /> </head> <body> <ul id="tab-bar" class="page-spots"> <li id="tab-spots"> <a href="#">Spots</a> </li> <li id="tab-sighting"> <a href="#">Add a sighting</a> </li> <li id="tab-stars"> <a href="#">Stars</a> </li> </ul><!--#tab-bar --> </body> </html>

When I run this, instead of getting an unordered list with each list item styled according to the css, I get the three list items with no styling(no background colors, margins ...etc). 当我运行此命令时，我得到的是三个没有样式（没有背景色，边距等）的列表项，而不是每个列表项都按照CSS样式设置的无序列表。

What is the problem? 问题是什么？

Again, thanks for any help 再次感谢您的帮助

Answer 1

Check whether screen.css is in the same folder as the html file 检查screen.css是否与html文件位于同一文件夹中
Clear Browser Cache 清除浏览器缓存

Answer 2

Add float and width to your tab-bar element. 将浮动和宽度添加到标签栏元素。

#tab-bar {
    float: left;
    width: 100%;
    background: #050405;
    border-bottom: 1px #441d22 solid;
    position: relative;
}

Also, you're missing a semicolon: 另外，您缺少分号：

body {
    font-family: "HelveticaNeue", Arial, Helvetica, sans-serif;
}

Here's jfiddle 这是jfiddle

Answer 3

After adding your code I am sorry but I could not get it to work. 添加您的代码后，很抱歉，但我无法使其正常工作。 I think you are looking for something like this. 我认为您正在寻找类似的东西。 If not then please dismiss this answer. 如果不是，请忽略此答案。 If you need further assistance please let me know. 如果您需要进一步的帮助，请告诉我。

 html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, th, td, article, aside, canvas, details, figcaption, figcaption, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { font-family: "HelveticaNeue", Arial, Helvetica, sans-serif; } .container { overflow: hidden; background-color: #050405; border-bottom: 2px #ccc solid; /*here you can see the border bottom, I added a red to visually see it*/ } .container a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; } .container a:hover, .dropdown:hover .dropbtn { background-color: #ccc; color: #333; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }

 <div class="container"> <a href="#home">Home</a> <a href="#sample">Sample</a> <div class="dropdown"> <button class="dropbtn">Spots</button> <div class="dropdown-content"> <a href="#">This is a long name even longer</a> <a href="#">Medium name</a> <a href="#">Short</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Add a Sighting</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <div class="dropdown"> <button class="dropbtn">Stars</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> <a href="#sample">Sample 2</a> </div>

Answer 4

Thanks everyone. 感谢大家。 Great suggestions. 很棒的建议。 It turned out to be the section dealing with tab a elements. 原来是处理tab a元素的部分。 It should be tab-bar a 它应该是标签栏

HTML和CSS文件未链接

问题描述

4 个解决方案

解决方案1
0 2017-07-13 21:06:06

解决方案2
0 2017-07-13 21:24:20

解决方案3
0 2017-07-13 21:52:23

解决方案4
0 2017-07-13 23:19:03

HTML和CSS文件未链接

问题描述

4 个解决方案

解决方案1 0 2017-07-13 21:06:06

解决方案2 0 2017-07-13 21:24:20

解决方案3 0 2017-07-13 21:52:23

解决方案4 0 2017-07-13 23:19:03

解决方案1
0 2017-07-13 21:06:06

解决方案2
0 2017-07-13 21:24:20

解决方案3
0 2017-07-13 21:52:23

解决方案4
0 2017-07-13 23:19:03