我在页面顶部有一系列按钮。这些按钮充当链接和下拉列表。按钮之间有空间无法消除。有办法摆脱这个空间吗？
同样，第一个按钮是链接。除下拉列表外，其他尚未设置。无论如何，当我有如下所示的html代码时，如果您不完全位于链接的顶部，则整个框将变为与页面背景相同的颜色，从而有效地创建了空白。
<BUTTON class="dropbtn"><A href="index.html">Wolf3DMall</A></BUTTON>
交换按钮和A标签可解决此问题：
<A href="index.html"><BUTTON class="dropbtn">Wolf3DMall</BUTTON></A>
但是在两种情况下，验证器都抱怨它不是有效的HTML。您不能将按钮作为锚的子代，也不能将锚作为按钮的子代。因此，即使这在Firefox和Edge中都可以使用（IE无法识别链接），是否有一种有效的方法可以执行此操作而不必求助于FORM？
这是页面的链接。
编辑：好吧，胡安，我用来实现链接/按钮组合的HTML代码已经在本文中了。我要求的是有效的HTML替代。
至于代码，您显然没有看页面，或者您知道为什么我想要页面外观和按钮操作方式的链接/按钮组合。您还将看到我正在谈论的空间问题。
页面中没有太多的CSS，让人觉得自己在“挖掘一堆代码”来寻找东西。但是，由于此代码基于W3Schools网站上的示例，因此这里是我使用的示例的“尝试”部分的链接。要重新创建按钮之间的空间效果，您要做的就是滚动到列表的底部，然后复制按钮的html代码（两个div）并将其粘贴到第一个按钮的下面，然后运行代码。您的示例将使用最少的代码量。
Edit2：感谢所有答复。现在，问题已得到纠正。对于链接问题，我要做的只是将我所拥有的课程放在锚点上的按钮上，然后删除按钮：
<DIV class="dropdown"><A class="dropbtn" href="index.html">Wolf3DMall</A></DIV>
如所示将display：flex添加到div可以解决空间问题。你们真棒！
您无需更改任何内容。您只需要添加display: flex到div菜单的上级即可删除菜单中space按钮之间的不必要内容。
现场演示：
body {
margin: 0;
background-color: #103872;
color: lightseagreen;
front-family: verdana;
}
a:link {
color: #103872;
text-decoration: none;
}
a:visited {
color: #103872;
}
a:hover {
color: lightseagreen;
}
a:active {
color: #103872;
}
h1 {
text-align: center;
}
.dropbtn {
background-color: lightseagreen;
color: #103872;
padding: 3px;
margin: 0 0;
font: bold 11px verdana;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: aquamarine;
font: bold 11px verdana;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: forestgreen;
padding: 3px 3px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: mediumaquamarine;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #103872;
color: lightseagreen;
}<div style="margin:auto;width:95%;display: flex;">
<div class="dropdown"><a href="index.html"><button class="dropbtn">Wolf3DMall</button></a></div>
<div class="dropdown"><button class="dropbtn">Original PC</button>
<div class="dropdown-content">
<a href="Wolf.htm">Wolfenstein 3D</a>
<a href="Spear.htm">Spear of Destiny</a>
<a href="PCTools.htm">Tools</a>
<a href="PCEmu.htm">Emulators</a>
<a href="Cheats.htm">Cheats</a>
<a href="FileSpecs.htm">Versions</a>
<a href="AlphaWolf.htm">The ALPHA File</a>
</div>
</div>
<div class="dropdown"><button class="dropbtn">Macintosh</button>
<div class="dropdown-content">
<a href="MacPlay.htm">MacPlay</a>
<a href="Greg.htm">4th Encounter</a>
<a href="MacTools.htm">Tools</a>
<a href="MacEmu.htm">Emulators</a>
</div>
</div>
<div class="dropdown"><button class="dropbtn">Wiki</button>
<div class="dropdown-content">
<a href="http://en.wikipedia.org/wiki/Wolfenstein_3D">Wolfenstein 3D (Wikipedia)</a>
<a href="http://en.wikipedia.org/wiki/Spear_of_Destiny_%28video_game%29">Spear of Destiny (Wikipedia)</a>
<a href="http://wolfenstein.wikia.com/wiki/Wolfenstein_3D">Wolfenstein 3D (Wolfenstein Wiki)</a>
<a href="http://wolfenstein.wikia.com/wiki/Spear_of_Destiny">Spear of Destiny (Wolfenstein Wiki)</a>
</div>
</div>
<div class="dropdown"><button class="dropbtn" href="SNES.htm">Super Nintendo (SNES)</button></div>
<div class="dropdown"><button class="dropbtn" href="Jag.htm">Atari Jaguar</button></div>
<div class="dropdown"><button class="dropbtn" href="3DO.htm">3DO</button></div>
<div class="dropdown"><button class="dropbtn" href="AppleIIgs.htm">Apple IIgs</button></div>
<div class="dropdown"><button class="dropbtn" href="Acorn.htm">Acorn Archimedes</button></div>
<div class="dropdown"><button class="dropbtn" href="Gameboy.htm">Gameboy Advance</button></div>
<div class="dropdown"><button class="dropbtn" href="PS3.htm">Playstation 3</button></div>
<div class="dropdown"><button class="dropbtn" href="XB360.htm">XBox 360</button></div>
<div class="dropdown"><button class="dropbtn" href="iPhone.htm">iPhone/IPod Touch</button></div>
<div class="dropdown"><button class="dropbtn" href="Symbian.htm">Symbian</button></div>
<div class="dropdown"><button class="dropbtn" href="TI83.htm">TI-83 Series</button></div>
<div class="dropdown"><button class="dropbtn" href="TI84.htm">TI-84 Series</button></div>
<div class="dropdown"><button class="dropbtn" href="Maemo.htm">Maemo</button></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句