Question

I am building a navbar and I had everything working yesterday. My computer lost power last night and I don't have the code from yesterday anymore apparently. Anyways, my css is:

ul {
  float: right;
  background-color: black;
  width: 600px;
}

a {

  display: inline-block;
  color: white;
  text-decoration: none;

}

a:link {
  text-decoration-color: none;
}

a:hover {
background-color: blue;
}

li {
  float: left;
  color: white;
  list-style: none;
  display: inline;
  padding: 20px 40px 20px 40px; 
}

body {
  background-color: #f0f0f5;
}

And the html is:

<!DOCTYPE html>
<head>
    <title>Practice Site</title>
    <link href=main.css rel=text/css type=stylesheet/>
</head>

<body>
    <ul>
        <li><a href=#></a>Home</li>
        <li><a href=#></a>Home</li>
        <li><a href=#></a>Home</li>
        <li><a href=#></a>Home</li>
    </ul>
    <!--Sign up form-->
    <form>
        <p>First Name</p>
        <input type="text" name="First Name" size="20" maxlength="30" />
    </form>
</body>

Also, I don't quite understand how I can indent all of the code that I have to display in my questions without using control+v to copy the required indent. I already read the advanced help and did not see how to do this there.

Answer 1

您的<a>元素中没有任何内容。移动<a>元素内的文字，您将看到链接。

更改

<li><a href=#></a>Home</li>

到

<li><a href=#>Home</a></li>

Answer 2

因为他们有：

没有能够为他们提供身高/宽度的内容
尽管没有内容，但没有CSS会给他们一个高度/宽度

将文字放在链接中而不是在其后面。

Answer 3

请参阅此代码：

＆＃13;

ul {
  float: right;
  background-color: black;
  width: 600px;
}

a {

  display: inline-block;
  color: white;
  text-decoration: none;
padding: 20px 40px 20px 40px; 
}

a:link {
  text-decoration-color: none;
}

a:hover {
background-color: blue;
}

li {
  float: left;
  color: white;
  list-style: none;
  display: inline;
}

body {
  background-color: #f0f0f5;
}

＆＃13;

<ul>
  <li><a href=#>Home</a></li>
  <li><a href=#>Home</a></li>
  <li><a href=#>Home</a></li>
  <li><a href=#>Home</a></li>
</ul>
<!--Sign up form-->
<form>
<p>First Name</p>
<input type="text" name="First Name" size="20" maxlength="30" />
</form>

＆＃13;

为什么我的<a> elements not displaying?

3 个答案: