Как выровнять <ul>в <span>сверху? - PullRequest
Новая
       1

Как выровнять <ul>в <span>сверху?

0 голосов
/ 22 марта 2019

Я хочу сделать закладку, но <ul> внутри моего <span> всегда остается внизу и слева.Я не знаю, как разместить его посередине (например, valign=center и 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);
}
<!--
  <li><a href="https://"></a></li>			
-->
  <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>

Где я ошибся?

А также, класс .hypixel не будет желтым, когда я наведу на него курсор.

Ответы [ 3 ]

2 голосов
/ 22 марта 2019

Удалите <span> s, потому что они недействительны, и не рекомендуется, когда таблица используется для разметки, поэтому она также удаляется (она даже не была завершена только начальным тегом).Теги <meta> и <title> принадлежат тегу <head>.Самое главное Никогда не дублируйте идентификатор .Каждый <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 голос
/ 22 марта 2019

Быстрое и грязное решение в CSS: 

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

HTML: поместил класс на элементы внешнего диапазона 

<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;
}
0 голосов
/ 22 марта 2019

Я считаю, что это то, что вы ищете.

Посмотрите на изменения в стиле 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>

Надеюсь, это поможет,

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...