Question

以下是我的基本CSS风格。我已经制作了我的标题＆＃34;一个超链接，以便访问者可以快速返回主页。但是，当我添加我的表时，标题超链接将被禁用。

＆＃13;

/* JavaScript */

.header {
	position: absolute;
	height: 85px;
	right: 0;
	top: 0;
	left: 0;
	padding: 1rem;
	background-color: #3399CC;
	text-align: center;
	font-size: 100%;
	color: #FFFFFF;
}
.wrap {
	width: 100%;
	max-width: 24em;
	margin: auto;
}
.content {
	position: absolute;
	top: 0px;
	margin-top: 5px;
	margin-left: 5px;
}
h1:link, a:link {
	color: white;
}
table, td, th {
	border: 10px solid #ffffff;
	text-align: left;
	margin-top: 140px;
}
table {
	border-collapse: initial;
	width: 100%;
}
td {
	padding: 15px;
	width: 25%;
	line-height: 2;
}
th {
	background-color: grey;
	color: white;
	padding: 5px;
	width: 25%;
}
td:hover {
	background-color: #f5f5f5
}

＆＃13;

这是我的标题，如果我删除以下内容，我的标题会保留一个超链接。如果我添加以下内容，我的标题将不再是超链接。

＆＃13;

<body>
<div class="header">
  <h1><a href="index.html" style="text-decoration: none">Title</h1>
  </a> </div>
<!-- Here is my table content. -->
<div class="content">
<table class="ex1">
  <tr>
    <th>$company</th>
    <th>$company</th>
    <th>$company</th>
  </tr>
  <tr>
    <td><img src="ateam.jpg" alt="team" style="width: 260px; 
        height: 150px;"> <br>
      <b>URL:</b> $url <br>
      <b>Location:</b> $location <br>
      <b>Inductry:</b> $dropdown <br>
      <b>Start Date:</b> $sdate  &nbsp <b>End Date:</b> $edate <br>
      <b>Announcement:</b><br>
      $announcement <br></td>
   </tr>
</table>
</div>
<footer></footer>
</body>

＆＃13;

我无法弄清楚为什么添加一张桌子会影响我的＆＃34; Title＆＃34;。任何帮助将不胜感激。

Answer 1

您在此处关闭代码的顺序错误：

<h1><a href="index.html" style="text-decoration: none">Title</h1></a>

那应该是

<h1><a href="index.html" style="text-decoration: none">Title</a></h1>

此外，完整的footer应位于body内，并且您没有<div class="content">的结束标记（即在其他人编辑您的问题中的代码之前的状态）

补充/完成解决方案：

您的.content覆盖了header（两者都有绝对位置）。如果您从表中删除margin: 140px并将其移至content规则，则可以正常运行：

.header {
  position: absolute;
  height: 85px;
  right: 0;
  top: 0;
  left: 0;
  padding: 1rem;
  background-color: #3399CC;
  text-align: center;
  font-size: 100%;
  color: #FFFFFF;
}
.wrap {
  width: 100%;
  max-width: 24em;
  margin: auto;
}
.content {
  position: absolute;
  top: 0px;
  margin-top: 5px;
  margin-left: 5px;
}
h1:link,
a:link {
  color: white;
}
.content {
  margin-top: 140px;
}
table,
td,
th {
  border: 10px solid #ffffff;
  text-align: left;
}
table {
  border-collapse: initial;
  width: 100%;
}
td {
  padding: 15px;
  width: 25%;
  line-height: 2;
}
th {
  background-color: grey;
  color: white;
  padding: 5px;
  width: 25%;
}
td:hover {
  background-color: #f5f5f5
}

<body>
  <div class="header">
    <h1><a href="index.html" style="text-decoration: none">Title</a></h1>
  </div>
  <!-- Here is my table content. -->
  <div class="content">
    <table class="ex1">
      <tr>
        <th>$company</th>
        <th>$company</th>
        <th>$company</th>
      </tr>
      <tr>
        <td>
          <img src="ateam.jpg" alt="team" style="width: 260px; 
        height: 150px;">
          <br>
          <b>URL:</b> $url
          <br>
          <b>Location:</b> $location
          <br>
          <b>Inductry:</b> $dropdown
          <br>
          <b>Start Date:</b> $sdate &nbsp <b>End Date:</b> $edate
          <br>
          <b>Announcement:</b>
          <br>$announcement
          <br>
        </td>
      </tr>
    </table>
  </div>
  <footer></footer>
</body>

Answer 2

我刚刚在浏览器中运行您的代码，我相信链接无效的原因是div.content实际上（隐身）覆盖div.header因此阻止用户将鼠标悬停在其上/点击它

我发现的解决方案是将div.content从position:absolute;更改为position:relative;。

带有超链接问题的CSS样式标题

2 个答案: