Move logo to right | 易学教程

问题

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/

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

回答2:

You can use flexbox for it. But don't forget to include all prefixes for different browsers support.

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

回答3:

add this css for this

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

来源：https://stackoverflow.com/questions/40471001/move-logo-to-right

标签

html

css

semantic-ui