将徽标向右移动

Question

我试图将徽标向右移动，但它没有移动。

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/

Answer 1

为此添加css

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

Answer 2

你可以使用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>

Answer 3

你可以这样做：

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

Fixed jsFiddle

!important 是必需的，因为您的 .ui.menu .item>img:not(.ui) 选择器正在设置边距，它是一个更具体的选择器，因此它会覆盖 .logoright 选择器。如果您为 img 指定了一个 id，并将其用作您的选择器，您可以完全避免 !importants。如果您只打算在菜单栏上使用它，可能更有意义。

将徽标向右移动

Move logo to right

html

css

semantic-ui