将徽标移到右侧 [英] Move logo to right

问题描述

我尝试将标志向右移动，但不移动。

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.pngclass =logoright> 
< / div> 
 
< div class =item ui search eight wide column> 
< div class =ui icon input> 
< input class =promptplaceholder =Common passwords ...type =text> 
< i class =search icon>< / i> 
< / div> 
< div class =results>< / div> 
< / div> 
< / div> 
  

CSS：

 code> .logoright {
 text-align：right！important; 
} 
  

我也选中了 ui small right floated image 和右对齐，但没有人看起来工作。

解决方案

您只需这样做：

  .logoright {
 margin-right：0px！important; 
 margin-left：auto！important; 
} 
  

修复jsFiddle

需要！important 你的 .ui.menu .item> img：not（.ui） selector设置边距，它是一个更具体的选择器，因此覆盖。 logoright 选择器。如果你为img指定了一个id，并且使用它作为你的选择器，你可以完全避免！important 。如果你只想在菜单栏上使用它，可能会更有意义。

I am trying to move logo to right but it doesn't move.

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

I have also checked ui small right floated image and right aligned but no one seems to be working.

I want to move image to the left-most of search bar NOT at the end of the nav bar.

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

解决方案

You can just do this:

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

Fixed jsFiddle

The !importants are needed because your .ui.menu .item>img:not(.ui) selector is setting the margin and it's a more specific selector so it overrides the .logoright selector. If you specified an id for the img, and used that as your selector you could avoid the !importants completely. Might make more sense if you're only going to use this on a menu-bar.

这篇关于将徽标移到右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！