0

начал писать сайт на html и столкнулся с проблемой
Не могу никакими способами сделать так, чтобы меню(слова "Главная""Политика" и тд) была выравненная по левому краю, а точнее, чтобы она была по левому краю от нашего фиксированного контейнера, то есть чтобы было как с лого "Новостное агенство" и с надписью "Самые свежие новости"
А также не могу добавить слэш между данными элементами Должно в итоге получиться как на конечной картинке(фото прилагаю).
Первая картинка это то, что получилось у меня, а вторая как должно быть

html,
body {
  margin: 0;
  padding: 0;
  min-width: 1000px;
  font-family: Arial;
}

h2 {
  font-size: 20px;
  padding: 27px 0 27px 18px;
  margin: 0 0 34px;
  border-bottom: 1px solid #e5e5e5;
}

#black-bar {
  background-color: #000066;
  color: white;
  padding: 20px 0;
  font-size: 16px;
}

#black-bar a {
  color: white;
}

.fixed-container {
  width: 960px;
  margin: 0 auto;
  position: relative;
}

#datetime {
  float: right;
}

#header {
  height: 100px;
}

#logo {
  position: absolute;
  top: 40px;
}

#menu-container {
  height: 70px;
}

#find {
  float: right;
  margin-top: 40px;
}

#weather {
  position: relative;
  left: 68%;
  top: 40px;
}

.menu1 {
  position: relative;
  float: left;
  top: 40px;
  width: 100px;
  text-align: center;
}

.MenuLeft {}
<div id="black-bar">
  <div class="fixed-container">
    Самые <a href="#">свежие новости</a> в реальном времени
    <div id="datetime">12:30 19.06.2018</div>
  </div>
</div>
<div id="header">
  <div class="fixed-container">
    <img id="logo" src="logo.png">
  </div>
  <div class="fixed-container">
    <input id="find" type="type" name="findtext" placeholder="Поиск по сайту">
  </div>
  <div class="fixed-container">
    <img id="weather" src="weather.png">
  </div>
</div>
<div id="menu-container" class="MenuLeft">
  <div class="fixed-container">
    <div class="menu1">Главная</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Политика</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Общество</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Экономика</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">В мире</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">События</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Спорт</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Наука</div>
  </div>
  <div class="fixed-container">
    <div class="menu1">Туризм</div>
  </div>
</div>

Мой вариант

Конечный вариант

2
  • justify-content: start, а для слеша юзай псевдоелемент) 12 июн 2020 в 19:27
  • Попробовал, у меня просто теперь это меню от левого края экрана идет, а мне нужно было, чтобы от левого края контейнера, либо я что-то не так делаю? justify-content: start вставил в класс, который используется во всех дивах если что
    – Zerono
    12 июн 2020 в 19:41

1 ответ 1

0

Чтобы выравнять блок с разделами по левому краю просто убери свойство text-align: center у .menu1.


Реализации "/" между названиями разделов я не увидел, своей предлагать не могу, так как у меня очень садистские вкусы)))


Надеюсь, я хорошо ответил на твой вопрос.

4
  • Здравствуйте, если убираю text-align, то у меня элементы уже не особо ровно и красиво располагаются, поэтому и ищу способ красиво их расположить, а также чтобы они были от левого края контейнера
    – Zerono
    12 июн 2020 в 20:07
  • Нет, ну в принципе(для "/") можешь использовать ::after, ну хотя я думаю что тут и простой div подойдет, просто ::after, я считаю, нужен больше для процентной верстки, а так как таковую ты не используешь, думаю не надо излишне усложнять код.
    – AlexVolkov
    12 июн 2020 в 20:17
  • Можешь по играться с отступами(marign,pading)
    – AlexVolkov
    12 июн 2020 в 20:25
  • Хорошо, попробую, спасибо за ответы А вообще первоначально переделал так, что для первого элемента text-align left , а для остальных сделал central, так можно делать или лучше все же разобраться и переделать нормльно?
    – Zerono
    12 июн 2020 в 20:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.