当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Why are my <a> elements not displaying?

问题描述:

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.

网友答案:

Your <a> elements have no content in them. Move the text inside the <a> element and you'll see the links.

Change

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

to

<li><a href=#>Home</a></li>
网友答案:

Because they have:

  • No content that would give them a height/width
  • No CSS that would given them a height/width despite having no content

Put the text inside the link instead of after it.

网友答案:

See this code:

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;
}
<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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: