Мой нижний колонтитул содержит 3 списка. Как это можно расположить в 3 ряда в режиме без рабочего стола или в мобильном режиме? - PullRequest
Новая
       6

Мой нижний колонтитул содержит 3 списка. Как это можно расположить в 3 ряда в режиме без рабочего стола или в мобильном режиме?

0 голосов
/ 20 октября 2019

У меня есть 3 списка в нижнем колонтитуле.
В настольной версии я вижу это - 

    Listx Listy Listz

В мобильном или не настольном режиме я должен иметь возможность видеть это - 

     Listx
     Listy
     Listz

Как настроить мой CSS ниже, чтобы эти 3 списка выглядели как 3 отдельные строки?

Вот мой HTML 

<div class="footer-container">
  <div class = "container">    
    <div class = "link-div">
      <ul class="footer">
        <li >
          <a  href="www.listx.com">Listx</a>
        </li>
        <li >
          <a  href="www.listy.com">Listy</a>
        </li>
        <li>
          <a  href="www.listz.com">Listz</a>
        </li>
      </ul>
    </div>    
  </div>
</div>

Мой Css 

.footer-container {
    background-color:#05446c;
  text-align:left;
  width: 100%;
  font-size: 11px;
  color: rgb(40,40,40)  !important;     
  bottom:0;
  padding: 7px;
  font-family: Verdana, sans-serif;
}

.link-div { 
  float:left;
  text-align:left;
  margin-top: 10px;
  margin-bottom: 10px;
}

li {
  display: inline;
  text-align: left;
  padding-right: 50px;  
}

li a { 
  color: $color-lightest  !important; 
}

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding-left: 0px;
}

Возможно, мне нужен медиа-запрос, но после попытки другой настройки в моем CSS, он не дал мнеожидаемый результат.

1 Ответ

0 голосов
/ 27 октября 2019

Вы пробовали что-то подобное? 

@media (max-width: 767px) {
  ul.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  ul.footer li {
    width: 100%;
  }    
}

С помощью flexbox и медиа-запросов вы могли бы добиться этого. Подробнее о flexbox здесь

...