Как расставить содержимое моего <ul>?
Я хочу, чтобы содержимое было равномерным, а затем пробелы для всех имели одинаковую сумму, но я не уверен, как это сделать. Когда я добавляю дополнение к списку или увеличиваю пространство в столбце, это портит формат страницы.
Я также попытался добавить смещение в строку, но это все равно не исправляет. Итак, я пытаюсь, чтобы это было похоже на:
Projects About Me Contact Me
Pic Pic Pic
Но каждый раз, когда я что-то меняю, оно меняется на:
Projects Pic About Me Contact Me
Pic Pic
.header {
font-family: Cambria;
font-size: xx-large;
text-align: center;
padding: 50px;
background-color: lightblue;
background-image: linear-gradient(to bottom right, darkgray, lightblue);
}
.home {
width: 100%;
}
.home div {
width: 200px;
}
.home img {
vertical-align: middle;
border-style: none;
height: 200px;
width: 200px;
object-fit: cover;
}
.home ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
.home li {
margin-left: 20px;
list-style: none;
float: left;
}
.home a {
text-decoration: none;
font-family: Cambria;
font-weight: lighter;
color: steelblue;
}
.home a:hover {
font-weight: bold;
color: darkblue;
}
.home img:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}<body style = "background-color:mintcream">
<div class = "header">
<span style = "color:darkblue">const</span>
<span style = "color:white">_name =</span>
<span style = "color:darkblue">"My_Name"</span>
</div>
<div class = "row">
<ul class = "home" style = "padding-top:20px;">
<li class = "col-md-3">
<a href = "#">
<span style = "font-size:35px">Projects</span>
<span><img src = "https://via.placeholder.com/300.png/09f/fff"/
</span>
</a>
</li>
<li class = "col-md-3">
<a href = "#">
<span style = "font-size:35px">About Me</span>
<div><img src = "https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
<li class = "col-md-2">
<a href = "#">
<span style = "font-size:35px">Contact Me</span>
<div><img src = "https://via.placeholder.com/300.png/09f/fff" /></div>
</a>
</li>
</ul>
</div>
</body>Да, это отражает мой вопрос. Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы использовали системы сетки? Это сделает все намного проще, а ваша веб-страница станет более отзывчивой. Посмотрите мой пример кода здесь: https://github.com/apanesar11/CSS-сетки
Как указал @apanesar11, сетки должны решить вашу проблему. Другим решением является использование flexbox. Я сделал вас и пример с фрагментом, предоставленным @mplungjan: https://codepen.io/mdubus/pen/BvXXmJ
.home {
width: 100%;
display:flex;
flex-direction:row;
justify-content:space-around;
}
Если вас не устраивает выравнивание, вы также можете заменить justify-content:space-around; в .home на justify-content:space-between;.
Я не уверен в том, какое выравнивание вы хотите, но надеюсь, что это поможет! :)
РЕДАКТИРОВАТЬ : Я также изменил .home a на
display:flex;
flex-direction:column;, чтобы ваша картинка шла под вашим текстом.
Почему бы не оставить фрагмент здесь? Вы можете просто "Скопировать, чтобы ответить"
Ты прав. Я здесь новенький и не видел эту кнопку. Спасибо !
Причина, по которой у вас сейчас такое поведение, заключается в том, что span является элементом в линию, тогда как div является элементом блокировать. Из-за этого изображения about.png и phone.jpg позиционируются в настоящее время, потому что начинаются новые, так как они заключены в элемент div. Ваш project.jpg img заключен в элемент span, а элементы span не начинаются с новой строки и занимают только то пространство, которое им нужно.
Я сделал тебе фрагмент. Пожалуйста, проверьте, отражает ли он ваш вопрос. Например, используйте изображение с placeholder.com.