Блог

Главная - Вопросы по программированию - Почему одно из моих изображений не отображается рядом друг с другом?

Почему одно из моих изображений не отображается рядом друг с другом?

#html #css

#HTML #css

Вопрос:

Я пытаюсь выстроить 3 изображения и немного текста в одну «строку», первые 2 изображения выровнены нормально, то же самое с текстом, но 3-е изображение отказывается, и я не уверен, почему.

вот мой код на данный момент:

 * {
  box-sizing: border-box;
}

body {
  display: inline-block;
  width: 800px;
  height: 1000px;
}

.logo {
  padding: 5px;
  display: inline;
}

.pfp {
  display: inline;
}

.msg {
  display: inline;
}

.userid {
  text-decoration-color: white;
  background-color: rgb(250, 250, 250);
  text-align: left;
  width: 50px;
  border-radius: 20%;
  display: block;
  font-size: 10px;
  margin-left: 160px;
  margin-top: -18px;
}  
 <div class='logo'>
  <img src='logo.jpg' , width=1 00px>
</div>

<div class="pfp">
  <a href="Profile Page.html">
    <img src='pfp.jpg' , width=5 0px>
  </a>
</div>
<div class='userid'>
  <span>[user_id]</span>
</div>
<div class='msg'>
  <a href='messages.html'>
    <img src='messages.jpg' , width=5 0px>
  </a>
</div>

Комментарии:

1. Можете ли вы добавить изображение выходных данных, которые вы получаете?

Ответ №1:

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

 * {
  box-sizing: border-box;
}

body {
  display: inline-block;
  width: 800px;
  height: 1000px;
}

.logo {
  padding: 5px;
  display: inline;
}

.pfp {
  display: inline;
}

.msg {
  display: inline;
}

.userid {
  text-decoration-color: white;
  background-color: rgb(250, 250, 250);
  text-align: left;
  width: 50px;
  border-radius: 20%;
  //display: block;
  display: inline;
  font-size: 10px;
  margin-left: 160px;
  margin-top: -18px;
}  
 <div class='logo'>
  <img src='logo.jpg' , width=1 00px>
</div>

<div class="pfp">
  <a href="Profile Page.html">
    <img src='pfp.jpg' , width=5 0px>
  </a>
</div>
<div class='userid'>
  <span>[user_id]</span>
</div>
<div class='msg'>
  <a href='messages.html'>
    <img src='messages.jpg' , width=5 0px>
  </a>
</div>