Logo nach rechts verschieben

Question

Ich versuche, das Logo nach rechts zu verschieben, aber es bewegt sich nicht.

HTML:

<div class="ui fixed stackable borderless blue inverted menu grid"> 

    <div class="item three wide column"> 
    <img src="http://semantic-ui.com/images/logo.png" class="logoright"> 
    </div> 

    <div class="item ui search eight wide column"> 
    <div class="ui icon input"> 
     <input class="prompt" placeholder="Common passwords..." type="text"> 
     <i class="search icon"></i> 
    </div> 
    <div class="results"></div> 
    </div> 
</div> 

CSS:

.logoright { 
    text-align: right !important; 
} 

ich auch ui small right floated image geprüft und right aligned aber niemand scheint zu funktionieren.

Ich möchte Bild auf der linken Seite der Suchleiste NICHT am Ende der Navigationsleiste verschieben.

https://jsfiddle.net/n55mwbg1/1/

Answer 1

Sie können dies nur tun:

.logoright { 
    margin-right: 0px !important; 
    margin-left: auto !important; 
} 

Fixed jsFiddle

Die !important s benötigt werden, weil Ihr .ui.menu .item>img:not(.ui) Wähler die Marge Einstellung und es ist eine spezifischere Selektor so überschreibt es die se Lektor. Wenn Sie eine ID für das IMG angegeben haben und diese als Selektor verwendet haben, könnten Sie die !important s vollständig vermeiden. Könnte mehr Sinn machen, wenn Sie dies nur in einer Menüleiste verwenden.

Answer 2

diese CSS für dieses

.ui.menu .item>img:not(.ui){ 
     border: 1px solid; 
     float: right; 
     position: absolute; 
     right: 0; 
     top: 11px; 
    } 

Answer 3

hinzufügen Sie Flexbox für sie verwenden können. Aber vergessen Sie nicht, alle Präfixe für die Unterstützung verschiedener Browser anzugeben.

.cont { 
 
display: -webkit-box; 
 
display: -ms-flexbox; 
 
display: flex; 
 
-webkit-box-pack: end; 
 
    -ms-flex-pack: end; 
 
     justify-content: flex-end; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet"/> 
 
<div class="ui fixed stackable borderless blue inverted menu grid"> 
 

 
    <div class="item three wide column cont"> 
 

 
     <img src="http://semantic-ui.com/images/logo.png" class="logo"> 
 

 
    
 
    </div> 
 

 
    <div class="item ui search eight wide column"> 
 
    <div class="ui icon input"> 
 
     <input class="prompt" placeholder="Common passwords..." type="text"> 
 
     <i class="search icon"></i> 
 
    </div> 
 
    <div class="results"></div> 
 
    </div> 
 
</div>