Display:flex a !important

Fri, 25 Nov 2022 09:49:49 +0000

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;
}

[CSS] Media Queries problem

Wed, 23 Jan 2019 14:05:55 +0000

Cześć i czołem tym razem mam problem z media queries, mianowicie warunki działają głównie przy dodaniu na końcu !important.

Gdzieś na internecie wyczytałem, żeby zaimportować owe media queries na końcu <head>, to nic nie dało, nawet spróbowałem dodać te reguły na koniec głównego pliku css i to również nic nie zmieniło.

Jakieś pomysły jak sobie z tym poradzić?

(Wydaje mi się, że kod jest zbędny; nie mam nigdzie w css warunku inline)

Forum Pasja Informatyki - Najnowsze z tagiem important

Display:flex a !important

[CSS] Media Queries problem