将徽标移至右侧

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

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

你可以这样做：

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

Fixed jsFiddle

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

Answer 3

为此添加此CSS

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