0

The apps are all the same size. However, now there will be functions that are a different size from the common functions. A bit of difference doesn't matter.

But to prevent this distance I want the text at the clock image to be right of the clock. How can I do that?

Current look

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.nav-lijst {
  list-style-type: none;
}

.list-item {
  display: inline-block;
  padding: 10px 5px;
  margin-left: auto;
  margin-right: auto;
}

.picca {
  height: 5vh;
  filter: brightness(0) invert(1);
}


/* .content {
    align onder boven
} */

.app {
  width: 100%;
  display: flex;
}

.menu-picca {
  display: inline-block;
  height: 10vh;
}

.imglabel {
  box-sizing: border-box;
  padding: 1px 10px 1px 1px;
  text-align: center;
}

.fig {
  text-align: center;
  border: 1px dotted gray;
  padding: 10px 10px;
  margin-left: auto;
  margin-right: auto;
}

.widget {
  border: 1px dotted gray;
  padding: 10px 10px;
  margin-left: auto;
  margin-right: auto;
}
<li class="list-item">
  <figure class="fig">
    <img class="menu-picca" src="https://via.placeholder.com/100">

    <form action="uploadplanning.php" method="post" enctype="multipart/form-data">
      <input type="file" name="fileToUpload" id="fileToUpload">
      <input type="submit" value="Upload Planning" name="submit" class="btn btn-primary">
    </form>
  </figure>
</li>

<li class="list-item">
  <div class="widget" style="justify-content:between">
    <img class="menu-picca" src="https://via.placeholder.com/100" style="float:left">
    <p style="justify-content:start">Neef</p>
  </div>
</li>
isherwood
  • 58,414
  • 16
  • 114
  • 157
kucb
  • 13
  • 4
  • Does this answer your question? [How to vertically align text with icon font?](https://stackoverflow.com/questions/22545325/how-to-vertically-align-text-with-icon-font) – isherwood Mar 14 '23 at 19:35
  • Or this? [How to align icon to the left with text to the right?](https://stackoverflow.com/questions/38448454/how-to-align-icon-to-the-left-with-text-to-the-right) – isherwood Mar 14 '23 at 19:36

1 Answers1

0

Make the .widget element a flex container and remove all the additional style attributes that you added and did not work. In short:

.widget {
  border: 1px dotted gray;
  padding: 10px 10px;  
  display: flex;
  gap: 1em;
}
<div class="widget">
  <img class="menu-picca" src="https://via.placeholder.com/100">
  <p>Neef</p>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
underflow
  • 1,545
  • 1
  • 5
  • 19