Question

我试图为一个班级重新创建英国广播公司网站，但我却陷入了一个非常烦人的标题问题。我试图让边框显示在整个div下面（标题的每个部分都有一个单独的div）。但是我的代码使边框只显示在div中的单词之上。到目前为止，这是样式表，它都是相关的和有效的。

编辑：我已尝试使用a#tab-1:hover和a#tab-1，但未包含任何不必要的代码。到目前为止，这就是我所拥有的。早期的样式似乎有必要使整个标题保持正确的格式，所以我不确定它是否对链接格式产生矛盾的影响。

＆＃13;

.topbar-section {

  float:left;
  border-left: 1px #CCCCCC solid;
  height:100%

}

#login-logo {

  width:25px;
  margin:10px 15px;
  float:left;
}

#signin {

  font-family:helvetica, arial, sans-serif;
  align:left;

}

#signin-text{

  font-weight:bold;
  font-size:90%;
  position:relative;
  top:16px;

}

      a#tab-1:hover {
  border-bottom: solid yellow;
  size:100%
}

a#tab-1 {
    text-decoration:none;
}

＆＃13;

<body>
  <div id="signin" class="topbar-section">
    <a href="" id="tab-1">
      <img src="login.png" id="login-logo">
      <span id="signin-text">Sign in</span>
    </a>
  </div>
</body>

＆＃13;

Answer 1

我不确定这是不是你要追求的，但如果我变暖，请告诉我。

.topbar-section ul {
  margin: 0;
  padding: 0;
}

.topbar-section li {
  float: left;
  list-style: none;
  padding: 1em;
}

.topbar-section li:hover {
  border-bottom: 1px solid gray;
}

<div id="signin" class="topbar-section">
  <ul>
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li><a href="#">third</a></li>
  </ul>
</div>

尝试为每个标题标签

1 个答案: