不需要的行与div之间的链接

Question

我正在使用html和css将3个框作为链接，间隔相等。出于某种原因，当我得到等间距的div时，在所有三个之间创建了一条线，作为到该线左边的div的链接。

为什么那条线？

这里是代码:(取出一些东西）

.divider{
	text-align: center;
}
.image{
	float:left;
}
#javatut, #frgames, #scratchtut{
	display: inline-block;
	zoom: 2.0;
	background-color: #c0c0c0;
	text-align: center;
	padding: 10px;
	width: 20%;
}
#javatut {
	border: 2px solid #ff8300;
}
#frgames {
	border: 2px solid #0000ff;
}
#scratchtut {
	border: 2px solid #ff8300;
}
#container {
    text-align: justify;
}
.stretch {
    width: 100%;
    display: inline-block;
}

<div id="container">
	<a href="url">
		<div id="javatut">
			<!-- stuff in here -->
		</div>
	</a>
	<a href="url">
		<div id="frgames">
			<!-- stuff in here -->
		</div>
	</a>
	<a href="url">
		<div id="scratchtut">
			<!-- stuff in here -->
		</div>
	</a>
	<span class="stretch"></span>
</div>

Answer 1

此行是由浏览器默认设置的带有下划线的链接引起的。只需在链接上设置text-decoration: none;，该行就会隐藏。

＆＃13;

＆＃13;

a {
  text-decoration: none;
}
.divider {
  text-align: center;
}
.image {
  float: left;
}
#javatut,
#frgames,
#scratchtut {
  display: inline-block;
  zoom: 2.0;
  background-color: #c0c0c0;
  text-align: center;
  padding: 10px;
  width: 20%;
}
#javatut {
  border: 2px solid #ff8300;
}
#frgames {
  border: 2px solid #0000ff;
}
#scratchtut {
  border: 2px solid #ff8300;
}
#container {
  text-align: justify;
}
.stretch {
  width: 100%;
  display: inline-block;
}

＆＃13;

<div id="container">
  <a href="url">
    <div id="javatut">
      <!-- stuff in here -->
    </div>
  </a>
  <a href="url">
    <div id="frgames">
      <!-- stuff in here -->
    </div>
  </a>
  <a href="url">
    <div id="scratchtut">
      <!-- stuff in here -->
    </div>
  </a>
  <span class="stretch"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为text-decoration CSS属性。设置为none，它可以工作。

#container a { text-decoration: none; }

Answer 3

您的加价不对

在div中创建标签，所有样式都能正常工作

检查这个

.divider {
  text-align: center;
}
.image {
  float: left;
}
#javatut,
#frgames,
#scratchtut {
  display: inline-block;
  zoom: 2.0;
  background-color: #c0c0c0;
  text-align: center;
  padding: 10px;
  width: 20%;
}
#javatut {
  border: 2px solid #ff8300;
}
#frgames {
  border: 2px solid #0000ff;
}
#scratchtut {
  border: 2px solid #ff8300;
}
#container {
  text-align: justify;
}
.stretch {
  width: 100%;
  display: inline-block;
}

<div id="container">

  <div id="javatut">

    <a href="url">
    </a>
  </div>


  <div id="frgames">
    <!-- stuff in here -->
    <a href="url">
    </a>
  </div>
  <div id="scratchtut">
    <!-- stuff in here -->

    <a href="url"></a>
  </div>

  <span class="stretch"></span>
</div>

希望这会有所帮助 你也可以使用flexbox来实现这个