Блог

Я пытаюсь совместить три вещи в ли с границей. А <h1> слева, а <p> посередине и а <img> справа. В настоящее время я делаю это с помощью свойства поля CSS, но, поскольку элементы изменяются по ширине и высоте, это в конечном итоге хорошо смотрится на некоторых и хуже на других:

Первый выглядит плохо, но второй имеет более широкие элементы и выглядит лучше.

Вот соответствующий HTML-код, который я в настоящее время использую:

И CSS:

 css
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

#container{
  display: block;
  margin: 0 auto;
  max-width: 40rem;
  padding: 1rem;
}

#raidList{
  list-style: none;
  margin: 0;
}

#raidList li{
  background: #ffffff;
  border-radius: 0.5rem;
  margin-top: 1rem;
  min-height: calc(1rem   96px);
  margin: 1.75rem 0;
  box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  overflow: none;
  text-align: center;
}

#raidList li img{
  margin-left: calc(100% - (160px   50%));
  float: right;
}

#raidList li h1{
  margin: 30px;
  font-size: 50px;
  float: left;
}

#raidList li p{
  margin-left: calc(50% - 160px);
}

#raidList li > *{
  position: relative;
}```

 

Как я могу это исправить? Имейте в виду, что это li, а не div. Спасибо!

это то, что я изменил, чтобы заставить его работать так, как вы хотите:

 .container{
    display: block;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

.raidList{
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    list-style: none;
    margin: 0;
}

.raidList li{
    position: absolute;
    width: 40%;
    background: #ffffff;
    border-radius: 0.5rem;
    margin-top: 1rem;
    min-height: calc(1rem   96px);
    margin: 1.75rem 0;
    box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: none;
}
 

Для вашего «li» попробуйте использовать justify-content вместо align-content и установите его в центр.
Я также изменил raidList на гибкий дисплей, чтобы он шел горизонтально и чтобы я мог применить содержимое обоснования к центру.

Это работает просто отлично, возможно, я изменил некоторые значения, такие как ширина или высота, но вы можете изменять их по своему усмотрению.

Вы можете добавить столько элементов, сколько захотите, «li» будет их оправдывать.

Надеюсь, это поможет 😉

Это своего рода макет, для которого сделан flexbox — просто применитесь display: flex к li — и align-items:center — для вертикального центрирования всего, а затем justify-content: space-between распределите их по горизонтали

Тем не менее, вам действительно не следует использовать h1 в каждой строке — h1 предназначены для заголовка верхнего уровня и указывают на заголовок содержимого самого высокого уровня для страницы.

 ul {
  padding: 0;
  margin:0;
  list-style: none;
}

h1 {
margin: 0;
}

.flex-container {
  padding: 16px 0;
  display: flex; 
  align-items: center;
  justify-content: space-between;
}

li{
 border-bottom: solid 1px red;
 } 

 <ul>
  <li class="flex-container">
    <h1>left content</h1>
    <p>middle content</p>
    <span>right content</span>
  </li>
    <li class="flex-container">
    <h1>left content</h1>
    <p>middle content</p>
    <span>right content</span>
  </li>
    <li class="flex-container">
    <h1>left content</h1>
    <p>middle content</p>
    <span>right content</span>
  </li>
 </ul>