如何在顶部的<span>中对齐<ul>？

时间：2019-03-22 20:40:14

标签： html css button

我想创建一个书签页面，但是<ul>中的<span>始终位于底部和左侧。我不知道如何将其放置在valign=center的{​​{1}}和align=center中间。我经过搜索和尝试，但找不到答案。

span
body {
  font-size: 16px;
  font-family: "Google Sans";
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  /*margin-left: 20%;*/
  /*margin-right: 50%;*/
  width: 200px;
  border: 1px solid black;
}

li {
  text-align: center;
  color: rgb(129, 129, 233);
}


/*li a {
	display: block;
	color: rgb(144, 144, 248);
	padding: 8px 16px;
	text-decoration: none;
	text-align: center;
	
}*/

#buttons li a {
  text-decoration: none;
  color: rgb(98, 204, 88);
  display: block;
  padding: 8px;
}

#buttons li a:hover {
  text-decoration: none;
  color: #000000;
  background-color: #33B5E5;
}


/*li a:hover {
	background-color: #555;
	color: white;
	border: 60px gray;
}*/

span {
  text-align: center;
  margin-bottom: 2em;
  display: inline-block;
  width: 33%;
}

span ul {
  text-align: center;
  vertical-align: 10px;
}

#buttons li a:hover .hypixel {
  background-color: rgb(197, 172, 58);
}

我在哪里做错了？

而且，当我将.hypixel类悬停在其上时，它不会是黄色的。

3 个答案:

答案 0 :(得分：2)

删除<span>，因为它们无效，并且在使用表格进行布局时不鼓励这样做，因此也将其删除（它甚至不只是开始标记）。 <meta>和<title>标签属于<head>标签。最重要的是从不重复ID 。每个<ul>都将id="buttons"更改为class="buttons"。

我假设您希望将每个<ul>作为一列。我将<main>标签包裹在三个<ul>周围，并分配了display: flex并排放置。 .hypixel选择器必须是<a>的后缀。另外，我不知道最后一个<ul>应该在中间。

演示

body {
  font-size: 16px;
  font-family: "Google Sans";
}

.flex {
  display:flex;
  justify-content: space-evenly;
  align-items:start;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  margin-left: 0 auto;
  width: 200px;
  border: 1px solid black;
}

li {
  text-align: center;
  color: rgb(129, 129, 233);
}

.buttons li a {
  text-decoration: none;
  color: rgb(98, 204, 88);
  display: block;
  padding: 8px;
}

.buttons li a:hover {
  text-decoration: none;
  color: #000000;
  background-color: #33B5E5;
}


/*li a:hover {
    background-color: #555;
    color: white;
    border: 60px gray;
}*/

span {
  text-align: center;
  margin-bottom: 2em;
  display: inline-block;
  width: 33%;
}

ul {
  text-align: center;
  vertical-align: 10px;
}

.buttons li a.hypixel:hover  {
  background-color: rgb(197, 172, 58);
}
<html>

<head>
  <meta charset="UTF-8" />
  <title>Bookmarks</title>
</head>

<body>
  <main class='flex'>
    <ul class="buttons">
      <li>Programming</li>
      <li><a href="https://codeforces.com">Codeforces</a></li>
      <li><a href="https://vnoi.info">VNOI</a></li>
      <li><a href="https://vnoi.info/wiki/Home">VNOI Wiki</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/1xSPwkmXcGotPTO4hrbBRwyxngxgOEXpJCCRWJEq04BI/edit#gid=0">Tài liệu lập trình</a></li>
      <li><a href="https://www.mediafire.com/folder/9jm64z3or98au/C_C%2B%2B">C C++</a></li>
      <li><a href="https://www.youtube.com/watch?v=9kohr6pMwag&list=PL33lvabfss1wUj15ea6W0A-TtDOrWWSRK">C# Kteam</a></li>
      <li>
        <a href="https://cspcope.tk/Problem"></a>
      </li>
    </ul>

    <ul class="buttons">
      <li>Minecraft</li>
      <li><a href="https://minecraft.tools/en/">Minecraft Tools</a></li>
      <li><a class="hypixel" href="https://hypixel.net">Hypixel</a></li>
      <li><a href="https://minecraft.net">Official Minecraft Site</a></li>
      <li><a href="https://aternos.org/server/">MCPC 2</a></li>
      <li>
        <a href=""></a>
      </li>
      <li>
        <a href=""></a>
      </li>

    </ul>

    <ul class="buttons">
      <li>Phim và giải trí</li>
      <li><a href="https://www.fshare.vn/folder/ICWBG4Y927K1#!#94u203z203r2t2e47413z2e4u25423">Phim Việt</a></li>

    </ul>
  </main>
</body>

</html>

答案 1 :(得分：1)

CSS中又脏又臭的解决方案：

.bookmark {
  position: relative;
}
.bookmark ul {
  position: absolute;
  top 0;
}

HTML：将类放在外部span元素上

<html>
    <head></head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <title>Bookmarks</title>
    <body>
        <!--
                <li><a href="https://"></a></li>            
        -->
        <table>
                <span class="bookmark">
                    <ul id="buttons">
                        <li>Programming</li>
                        <li><a href="https://codeforces.com">Codeforces</a></li>
                        <li><a href="https://vnoi.info">VNOI</a></li>
                        <li><a href="https://vnoi.info/wiki/Home">VNOI Wiki</a></li>
                        <li><a href="https://docs.google.com/spreadsheets/d/1xSPwkmXcGotPTO4hrbBRwyxngxgOEXpJCCRWJEq04BI/edit#gid=0">Tài liệu lập trình</a></li>
                        <li><a href="https://www.mediafire.com/folder/9jm64z3or98au/C_C%2B%2B">C C++</a></li>
                        <li><a href="https://www.youtube.com/watch?v=9kohr6pMwag&list=PL33lvabfss1wUj15ea6W0A-TtDOrWWSRK">C# Kteam</a></li>
                        <li><a href="https://cspcope.tk/Problem"></a></li>
                    </ul>
                </span>
                <span class="bookmark">
                    <ul id="buttons">
                        <li>Minecraft</li>
                        <li><a href="https://minecraft.tools/en/">Minecraft Tools</a></li>
                        <li><a class="hypixel" href="https://hypixel.net">Hypixel</a></li>
                        <li><a href="https://minecraft.net">Official Minecraft Site</a></li>
                        <li><a href="https://aternos.org/server/">MCPC 2</a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>

                    </ul>
                </span>
                <span class="bookmark">
                    <ul id="buttons">
                        <li>Phim và giải trí</li>
                        <li><a href="https://www.fshare.vn/folder/ICWBG4Y927K1#!#94u203z203r2t2e47413z2e4u25423">Phim Việt</a></li>

                    </ul>
                </span>
            <span></span>
</html>

但是其他所有人的投诉都是有效的。您需要验证HTML并花更多时间考虑选择为什么的原因。 Table是嵌套的spans和ul？那不是明智的或必要的。

我会这样做：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <title>Bookmarks</title>
     </head>
    <body>
        <nav>
          <div class="bookmark">
            <ul id="buttons">
              <li>Programming</li>
              <li><a href="https://codeforces.com">Codeforces</a></li>
              <li><a href="https://vnoi.info">VNOI</a></li>
              <li><a href="https://vnoi.info/wiki/Home">VNOI Wiki</a></li>
              <li><a href="https://docs.google.com/spreadsheets/d/1xSPwkmXcGotPTO4hrbBRwyxngxgOEXpJCCRWJEq04BI/edit#gid=0">Tài liệu lập trình</a></li>
              <li><a href="https://www.mediafire.com/folder/9jm64z3or98au/C_C%2B%2B">C C++</a></li>
              <li><a href="https://www.youtube.com/watch?v=9kohr6pMwag&list=PL33lvabfss1wUj15ea6W0A-TtDOrWWSRK">C# Kteam</a></li>
            </ul>
          </div>
          <div class="bookmark">
            <ul id="buttons">
              <li>Minecraft</li>
              <li><a href="https://minecraft.tools/en/">Minecraft Tools</a></li>
              <li><a class="hypixel" href="https://hypixel.net">Hypixel</a></li>
              <li><a href="https://minecraft.net">Official Minecraft Site</a></li>
              <li><a href="https://aternos.org/server/">MCPC 2</a></li>
            </ul>
          </div>
          <div class="bookmark">
            <ul id="buttons">
              <li>Phim và giải trí</li>
              <li><a href="https://www.fshare.vn/folder/ICWBG4Y927K1#!#94u203z203r2t2e47413z2e4u25423">Phim Việt</a>
              </li>
            </ul>
          </div>
      </nav>
</html>

CSS：

nav {
  display: flex;
  flex-wrap: wrap;
}

答案 2 :(得分：0)

我相信这就是您想要的。

看看span样式中的变化：

body {
  font-size: 16px;
  font-family: "Google Sans";
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  /*margin-left: 20%;*/
  /*margin-right: 50%;*/
  width: 200px;
  border: 1px solid black;
}

li {
  text-align: center;
  color: rgb(129, 129, 233);
}


/*li a {
	display: block;
	color: rgb(144, 144, 248);
	padding: 8px 16px;
	text-decoration: none;
	text-align: center;
	
}*/

#buttons li a {
  text-decoration: none;
  color: rgb(98, 204, 88);
  display: block;
  padding: 8px;
}

#buttons li a:hover {
  text-decoration: none;
  color: #000000;
  background-color: #33B5E5;
}


/*li a:hover {
	background-color: #555;
	color: white;
	border: 60px gray;
}*/

span {
  text-align: center;
  margin-bottom: 2em;
  display: inline-block;
  width: 32%;
  vertical-align: top;
}

span ul {
  text-align: center;
  vertical-align: 10px;
}

#buttons li a:hover .hypixel {
  background-color: rgb(197, 172, 58);
}
<span>
    <ul id="buttons">
      <li>Programming</li>
      <li><a href="https://codeforces.com">Codeforces</a></li>
      <li><a href="https://vnoi.info">VNOI</a></li>
      <li><a href="https://vnoi.info/wiki/Home">VNOI Wiki</a></li>
      <li><a href="https://docs.google.com/spreadsheets/d/1xSPwkmXcGotPTO4hrbBRwyxngxgOEXpJCCRWJEq04BI/edit#gid=0">Tài liệu lập trình</a></li>
      <li><a href="https://www.mediafire.com/folder/9jm64z3or98au/C_C%2B%2B">C C++</a></li>
      <li><a href="https://www.youtube.com/watch?v=9kohr6pMwag&list=PL33lvabfss1wUj15ea6W0A-TtDOrWWSRK">C# Kteam</a></li>
      <li><a href="https://cspcope.tk/Problem"></a></li>
    </ul>
  </span>
<span>
    <ul id="buttons">
      <li>Minecraft</li>
      <li><a href="https://minecraft.tools/en/">Minecraft Tools</a></li>
      <li><a class="hypixel" href="https://hypixel.net">Hypixel</a></li>
      <li><a href="https://minecraft.net">Official Minecraft Site</a></li>
      <li><a href="https://aternos.org/server/">MCPC 2</a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </span>
<span>
    <ul id="buttons">
      <li>Phim và giải trí</li>
      <li><a href="https://www.fshare.vn/folder/ICWBG4Y927K1#!#94u203z203r2t2e47413z2e4u25423">Phim Việt</a></li>

    </ul>
  </span>
<span></span>

希望这会有所帮助，

相关问题
最新问题