Почему объект не располагается горизонтально?
Почему объекты не располагаются по горизонтали?
<link href="style.css" rel="stylesheet"> <ul class="header-line"> <li> <a href="./powerka.php" class="donate"> <img src="powerka_ico.png"> <p>70 Руб.</p> </a> </li> <li> <a href="./powerka.php" class="donate"> <img src="powerka_ico.png"> <p>70 Руб.</p> </a> </li> </ul> |
<link href="style.css" rel="stylesheet"> <ul class="header-line"> <li> <a href="./powerka.php" class="donate"> <img src="powerka_ico.png"> <p>70 Руб.</p> </a> </li> <li> <a href="./powerka.php" class="donate"> <img src="powerka_ico.png"> <p>70 Руб.</p> </a> </li> </ul>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@600&display=swap'); .header-div{ margin: -10px; height: 82px; flex-shrink: 0; border-radius: 0px 0px 60px 60px; background: linear-gradient(136deg, #43B6FE 0%, #9F48FF 100%); } .header-text{ height: 82px; flex-shrink: 0; border-radius: 0px 0px 60px 60px; background: linear-gradient(136deg, #43B6FE 0%, #9F48FF 100%); } .header-line{ margin: 0px 24px; } a{ text-decoration: none; } .heading{ display: flex; width: 561px; height: 70px; flex-direction: column; flex-shrink: 0; color: #FFF; font-size: 26px; font-family: 'Noto Sans', sans-serif; font-weight: 700; margin: 98px 64px; } .description{ display: flex; width: 409px; height: 254px; flex-direction: column; flex-shrink: 0; color: #8A8A8A; font-size: 20px; font-family: 'Noto Sans', sans-serif; font-weight: 300; margin: -120px 64px; } .Logo{ width: 629px; height: 267px; flex-shrink: 0; #background: url(http://nova-next.ru/logo.png), lightgray 50% / cover no-repeat; margin: -160px 625px; } .Line-text{ display: flex; width: 174px; height: 55px; flex-direction: column; flex-shrink: 0; color: #FFF; font-size: 32px; font-family: 'Noto Sans', sans-serif; font-weight: 700; text-decoration: none; display: inline; margin: 0px 10px; } .Line-text a { text-decoration: none; color: #FFF; } .donate{ display: inline; width: 281px; height: 337px; flex-shrink: 0; border-radius: 31px; background: rgba(255, 255, 255, 0.06); margin: 0px 48px; } .donate img { width: 267px; height: 267px; flex-shrink: 0; border-radius: 31px; margin: 7px 7px; } .donate p{ display: flex; width: 267px; height: 42px; flex-direction: column; flex-shrink: 0; color: #000; text-align: center; font-size: 26px; font-family: 'Noto Sans', sans-serif; font-weight: 700; margin: -5px; } |
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@600&display=swap'); .header-div{ margin: -10px; height: 82px; flex-shrink: 0; border-radius: 0px 0px 60px 60px; background: linear-gradient(136deg, #43B6FE 0%, #9F48FF 100%); } .header-text{ height: 82px; flex-shrink: 0; border-radius: 0px 0px 60px 60px; background: linear-gradient(136deg, #43B6FE 0%, #9F48FF 100%); } .header-line{ margin: 0px 24px; } a{ text-decoration: none; } .heading{ display: flex; width: 561px; height: 70px; flex-direction: column; flex-shrink: 0; color: #FFF; font-size: 26px; font-family: 'Noto Sans', sans-serif; font-weight: 700; margin: 98px 64px; } .description{ display: flex; width: 409px; height: 254px; flex-direction: column; flex-shrink: 0; color: #8A8A8A; font-size: 20px; font-family: 'Noto Sans', sans-serif; font-weight: 300; margin: -120px 64px; } .Logo{ width: 629px; height: 267px; flex-shrink: 0; #background: url(http://nova-next.ru/logo.png), lightgray 50% / cover no-repeat; margin: -160px 625px; } .Line-text{ display: flex; width: 174px; height: 55px; flex-direction: column; flex-shrink: 0; color: #FFF; font-size: 32px; font-family: 'Noto Sans', sans-serif; font-weight: 700; text-decoration: none; display: inline; margin: 0px 10px; } .Line-text a { text-decoration: none; color: #FFF; } .donate{ display: inline; width: 281px; height: 337px; flex-shrink: 0; border-radius: 31px; background: rgba(255, 255, 255, 0.06); margin: 0px 48px; } .donate img { width: 267px; height: 267px; flex-shrink: 0; border-radius: 31px; margin: 7px 7px; } .donate p{ display: flex; width: 267px; height: 42px; flex-direction: column; flex-shrink: 0; color: #000; text-align: center; font-size: 26px; font-family: 'Noto Sans', sans-serif; font-weight: 700; margin: -5px; }
Дополнительно:
Какой объект? И что значит "объект располагается горизонтально"?
Если речь про список, то да, по умолчанию он располагается вертикально.
Чтобы он стал горизонтальным, нужно ему что-нибудь такое задать. Флексы, гриды, инлайн-блоки и т.д.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы объект располагался горизонтально, необходимо использовать CSS свойство `display: inline-block;` или `display: inline;`. Эти свойства позволяют элементам располагаться горизонтально на одной линии.
Пример использования в HTML и CSS:
<div class="container"> <div class="element">Element 1</div> <div class="element">Element 2</div> <div class="element">Element 3</div> </div>
.container { width: 100%; } .element { display: inline-block; width: 30%; /* Ширина каждого элемента */ margin: 0 10px; /* Внешние отступы между элементами */ }
Если объект не располагается горизонтально, возможно это связано с другими CSS свойствами, которые могут влиять на его позиционирование. Убедитесь, что у элементов нет свойства `display: block;`, которое делает элементы блочными и размещает их каждый на новой строке.
Также убедитесь, что ширина элементов вместе с отступами не превышает ширину контейнера, в котором они находятся. В противном случае элементы будут переноситься на новую строку из-за недостаточного пространства.
Проверьте также другие CSS свойства, которые могут влиять на позиционирование элементов, такие как `float`, `position`, `flex`, `grid` и другие. Убедитесь, что они не мешают элементам располагаться горизонтально.
Если проблема все еще не решена, рекомендуется использовать инструменты разработчика браузера для анализа стилей элементов и их расположения на странице.