Как установить <ul>по вертикали? - PullRequest
Новая
       0

Как установить <ul>по вертикали?

0 голосов
/ 27 апреля 2020

В настоящее время у меня есть это в моем нижнем колонтитуле, что я хочу разместить его вертикально на небольших экранах, но не знаю точно, как это сделать. Не уверен, что это важно, но я использую модель flexbox на сайте. 

body { background-color: black; }

.menu-footer {
  flex-direction: column;
  padding-top: 50px;
}

.menu-footer ul {
  list-style: none;
  display: flex;
}

.menu-footer li {
  margin-left: 45px;
  font-family: "Josefin Sans", sans-serif;
  display: list-item;
  list-style-type: none;
  padding: 5px 0 5px 0;
}

.menu-footer a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.social-media ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.social-media li {
  margin-left: 30px;
  display: list-item;
  list-style-type: none;
  padding: 40px 0 10px 0;
  color: rgb(255, 255, 255);
  font-size: 1.3rem;
}
<div class="column">
  <div class="menu-footer">
    <ul>
      <li><a class="transition" href="./index.html">home</a></li>
      <li><a class="transition" href="./about.html">about</a></li>
      <li><a class="transition" href="./work.html">work</a></li>
      <li>
        <a class="transition" href="./contact.html">contact</a>
      </li>
    </ul>
  </div>

Как это выглядит сейчас

enter image description here

Ответы [ 3 ]

0 голосов
/ 27 апреля 2020

для достижения вертикального стиля на маленьких экранах просто добавьте стиль display: block in .menu-footer ul в медиа-запрос, указав желаемый размер экрана. 

body{
  background: black;
}

.menu-footer {
  flex-direction: column;
  padding-top: 50px;
}

.menu-footer ul {
  list-style: none;
  display: flex;
}
.menu-footer li {
  margin-left: 45px;
  font-family: "Josefin Sans", sans-serif;
  display: list-item;
  list-style-type: none;
  padding: 5px 0 5px 0;
}

.menu-footer a {
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.social-media ul {
  list-style: none;
  display: flex;
  justify-content: center;
}

.social-media li {
  margin-left: 30px;
  display: list-item;
  list-style-type: none;
  padding: 40px 0 10px 0;
  color: rgb(255, 255, 255);
  font-size: 1.3rem;
}
@media only screen and (max-width: 600px){
  .menu-footer ul{
    display: block;
  }
}
<div class="column">
  <div class="menu-footer">
    <ul>
      <li><a class="transition" href="./index.html">home</a></li>
      <li><a class="transition" href="./about.html">about</a></li>
      <li><a class="transition" href="./work.html">work</a></li>
      <li>
        <a class="transition" href="./contact.html">contact</a>
      </li>
    </ul>
  </div>
0 голосов
/ 27 апреля 2020

попробуйте 

<html>
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>
share
0 голосов
/ 27 апреля 2020

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

.social-media ul { flex-direction: column; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...