Display:flex a !important

pytanie zadane 25 listopada 2022 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)

Posiadam Diva, w którym jest napis, input i zdjęcie. Chcę aby input był nieco oddalony od napisu a zdjęcie było przyklejone do prawej strony.

1. Napis i input powinny być na środku wysokości div - użyłem w tym celu display:flex oraz algin-items: center

2. Dla zdjęcia napisałem nową klasę, ale niestety nie działa - nie umieszcza mi zdjęcia po prawej stronie diva - nawet pomimo dodania !important.

Czy wie ktoś co robię źle?

HTML

    <div class="bluebar">
        <div class="inside">
            SOCIAL&nbsp &nbsp
            <input type="search" class="search" placeholder="Search friends">
            <img src="img/ja.jpg" class="img">
        <div>
    </div>

CSS

.bluebar
{
	height:50px;
	background-color: #3c5a99;
	display:flex;
	align-items:center;

}

.inside
{
	width:800px;
	color:white;
	margin:auto;
	font-size: 1.5rem;
	font-style:italic;
	font-weight:800;
	display:flex;
	align-items:center;
}

.search
{
	outline:none;
	height:25px;
	width:300px;
	border-radius:10px;
	border:none;
	background-image: url("../img/search.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position:right;
}

.search:focus
{
	background-image:none;
}

.img
{	 
	height:50px;
	display:unset!important;
	float:right!important;
}

2 odpowiedzi

odpowiedź 25 listopada 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 25 listopada 2022 przez zbiku25

Najlepsza

Float nie działa wewnątrz flexboxa.

https://www.w3.org/TR/css-flexbox-1/#flex-containers

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Jeśli chcesz przesunąć element do prawej krawędzi kontenera flexowego, użyj margin-left: auto.

Poza tym, masz niedomknięty przedostatni <div>.

komentarz 25 listopada 2022 przez zbiku25 Bywalec (2,940 p.)

Super! Dzięki.

A czy jest jakaś możliwość aby zastosować lepsze rozwiązanie aniżeli &nbsp &nbsp do rozdzielenia napisu SOCIAL od inputa search?

komentarz 25 listopada 2022 przez VBService Ekspert (253,340 p.)
edycja 25 listopada 2022 przez VBService

lepsze rozwiązanie aniżeli &nbsp &nbsp

<div class="inside">
  SOCIAL
  <input type="search" class="search" placeholder="Search friends">
  ...
</div>

.inside input {
  margin-left: 1em;
}

lub np. użyć <span>

<div class="inside">
  <span>SOCIAL</span>
  <input type="search" class="search" placeholder="Search friends">
  ...
</div>

.inside span {
  margin-right: 1em;
}

lub np. użyć <label>

<div class="inside">
  <label for="search">SOCIAL</label>
  <input type="search" id="search" class="search" placeholder="Search friends">
  ...
</div>

.inside label {
  padding-right: 0.5em;
}

1	komentarz 25 listopada 2022 przez zbiku25 Bywalec (2,940 p.) Super, bardzo dziękuję. Rozwiązanie z margin-left:1em; podoba mi się najbardziej!

odpowiedź 25 listopada 2022 przez VBService Ekspert (253,340 p.)
edycja 25 listopada 2022 przez VBService

Możesz też dodać dodatkowe kontenery (div) (problem z float, to o czym napisał @ScriptyChris)

<div class="inside">
    <div><!-- first-child -->
      SOCIAL
      <input type="search" class="search" placeholder="Search friends">
    </div>
    <div>
      <img src="img/ja.jpg" class="img">
    </div>
  </div>

i dodać np. taki css

.inside div:first-child
{
    flex-grow: 2;
}

i wtedy wystarczy

.img
{    
    height: 50px;
}

lub

<div class="inside">
    <div>
      SOCIAL
      <input type="search" class="search" placeholder="Search friends">
    </div>
    <div>
      <img src="img/ja.jpg" class="img">
    </div>
  </div>

.inside
{
    width: 800px;
    color: white;
    margin: auto;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 800;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ... */

.img
{    
    height: 50px;
}