Question

我有以下css和html文件。

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

当我运行它时，不是根据css设置每个列表项的无序列表，而是获得没有样式的三个列表项（没有背景颜色，边距等等）。

有什么问题？

再次感谢您的帮助

Answer 1

检查screen.css是否与html文件位于同一文件夹中
清除浏览器缓存

Answer 2

向标签栏元素添加浮动和宽度。

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

另外，你错过了一个分号：

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

Here's jfiddle

Answer 3

添加您的代码后，我很抱歉，但我无法让它工作。我想你正在寻找这样的东西。如果没有，那么请忽略这个答案。如果您需要进一步的帮助，请告诉我。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

谢谢大家。很棒的建议。事实证明是处理tab元素的部分。它应该是tab-bar a

Html和Css文件没有链接

4 个答案: