Проблемы с размещением элементов <li> с помощью pourcentage

Я не могу разместить эти элементы li в нижнем колонтитуле с заливкой слева... В противном случае встроенный блок, который я использовал, больше не работает...

Я уже пытался использовать %, но потом он перестает быть встроенным...

Вы можете помочь мне ?

footer {
  position: fixed;
  bottom: 0px;
  left: 0;
  height: 65px;
  width: 100%;
  margin: auto;
  z-index: 99;
}

.footer ul {
  position: absolute;
  display: block;
  text-align: right;
  list-style-type: none;
  bottom: 15px;
  right: 5%;
}

.footer li {
  display: inline-block;
  position: relative;
  padding-left: 50px;
}

<footer>
  <div class = "footer">

    <ul>
      <li>
        <div id = "humidity">15%</div>
      </li>
      <li>
        <div id = "temp">15°C</div>
      </li>
      <li>
        <div id = "clock">15h15m15s</div>
      </li>
      <li>
        <div id = "date" class = "date">15.15.15</div>
      </li>
    </ul>

    <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1670 97" preserveAspectRatio = "none">
<g>
	<path fill = "#FE4A11" d = "M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
		c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
	<path fill = "#FE4A11" d = "M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
		c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
</g>
</svg>

  </div>
</footer>

html css

28.05.2019 20:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны установить width: 100%; на элемент ul.
Я создал ручку для того, чего вы хотите достичь:
кодовая ручка

28.05.2019 20:36

добавить ширину: 100% к элементу UL

footer {
  position:fixed;
  bottom:0px;
  left:0;
  height: 65px;
  width: 100%;
  margin: auto;  
  z-index:99;
}

.footer ul{
    position:absolute;    
    display:block;
    text-align:right;
    list-style-type: none;
    bottom:15px;
    right: 5%;
    width:100%;
    }


.footer li {
   display: inline-block;  
    
    padding-left: 5%;
}

<footer>
<div class = "footer">

<ul>
    <li><div id = "humidity">15%</div></li>
    <li><div id = "temp">15°C</div></li>
    <li><div id = "clock">15h15m15s</div></li>
    <li><div id = "date" class = "date">15.15.15</div></li>
  </ul>

    <svg xmlns = "http://www.w3.org/2000/svg"  viewBox = "0 0 1670 97" preserveAspectRatio = "none">
<g>
    <path fill = "#FE4A11" d = "M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
        c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
    <path fill = "#FE4A11" d = "M1669,52.659V97H847.357H0V52.659l122.675-16.814l142.712,3.871c0,0,231.45-27.464,236.787-27.78
        c5.336-0.316,272.148,27.132,272.148,27.132l198.221-14.81l360.398,14.679l231.414-15.818L1669,52.659z"/>
</g>
</svg>

</div>
</footer>

28.05.2019 20:39

Другие вопросы по теме

Создание представления иерархии в angular со списком объектов json

Изменить фон метки, когда она действует как флажок

Отключить выбор, если нечего показывать

Как отобразить капчу Google?

Как скрыть/показать строки таблицы HTML с интервалом

Ошибка определения переменной Javafx Css: ожидается «<число>» при анализе «размера шрифта»

Выделить столбец в элементе таблицы - CSS

Как выровнять два элемента на одной строке из PHP

Изменить изображение метки с радио входа

Встроенное горизонтальное правило

Проблемы с размещением элементов <li> с помощью pourcentage

Ответы 2

Другие вопросы по теме

Похожие вопросы