將徽標移至右側

我正在嘗試將徽標移至右側，但不移動。將徽標移至右側

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

我還檢查ui small right floated image和right aligned但似乎沒有人是工作。

我想將圖像移動到搜索欄的最左側，而不是在導航欄的末尾。

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

來源

2016-11-07 user3204934

你可以只是這樣做：

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

Fixed jsFiddle

的!important s的必要的，因爲你的.ui.menu .item>img:not(.ui)選擇是設置保證金，這是一個更具體的選擇因此它覆蓋了.logoright講師。如果您爲img指定了一個ID，並將其用作選擇器，則可以完全避免!important。如果你只打算在菜單欄上使用它，可能會更有意義。

來源

2016-11-08 00:26:19 Mordred

添加這個CSS此

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

來源

2016-11-07 17:35:51

好的我覺得有一個困惑，我想將圖像移動到最左端的搜索欄，而不是在導航欄的末尾。對不起， – user3204934

圖像和搜索框應該緊挨着對方？ –

是的，我給你的HTML代碼只是粘貼，如果它會爲你工作 –

可以使用Flexbox的吧。但不要忘記爲不同的瀏覽器支持包含所有前綴。

.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>

來源

2016-11-07 23:40:03 Walt

是否有這個功能沒有類提供語義ui – user3204934

你可以使用網格，例如： – Walt

裏面'cont'創建2 'div'帶有'two wide'類，所以我不熟悉語義UI – Walt

將徽標移至右側

回答

相關問題