为什么我的用户图标前有这么多的右边距?

Question

我有一个边是260px宽度。当我试图放置我的user-icon和name信息时，right-margin太多了。

<div class="rightBox pull-right" href="#">
 <ul class="navbar-nav navbar-right">                 
   <li class="dropdown">
   <li style="margin-top: 3px">
       <i class="fa fa-2x fa-border fa-user"></i>
   </li>
   <li>
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     <label class="navbar-text" style="margin-top: 5px;margin-left:0;">
     <strong><h4>
        <span>Karl Cadigan</span>
        <b class="glyphicon glyphicon-chevron-down"></b>
      </h4></strong>
     </label>
    </a>
  </ul>
 </div>

下面是我的小提琴。我想把user-icon和user-name放在左边，在右边留下下拉图标。

http://jsbin.com/kugudaho/6/edit

Answer 1

在CSS中添加以下类:使用display:inline-block将信息相邻显示。

ul.navbar-nav
{
position:relative;
}
ul.navbar-nav li {
list-style: none;
display:inline-block;
}
.glyphicon{position:absolute; right:15px; top:15px;}

Answer 2

如果我没理解错的话，这就是你需要的

HTML标记

 <div class="rightBox" href="#">
  <ul class="navbar-nav">                 
    <li class="dropdown">
    <li style="margin-top: 3px">
     <i class="fa fa-2x fa-border fa-user"></i>
    </li>
    <li class="glyph">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     <label class="navbar-text" style="margin-top: 5px;margin-left:0;">
     <strong><h4>
     <span>Frank</span>
     <b class="glyphicon glyphicon-chevron-down"></b>
     </h4></strong>
     </label>
    </a>
 </ul>
</div>

CSS

i {
  list-style: none;
}
.rightBox{ height: 60px; width:260px; border:1px dashed red; }
.fa-user {
  position: relative;
  background: #666666;
}
.fa-user:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 15px 0;
  border-color: transparent #89cd17 transparent transparent;
}
.navbar-nav li.glyph {
  float: right !important;
}
.navbar-nav {
  float: inherit;
  padding-left: 10px;
}

我希望我明白你需要什么。

Answer 3

我认为你最好从一个标准的Bootstrap下拉菜单开始，并在需要的地方进行定制。使用更少的自定义CSS(如果有的话)，更容易维护…

    <div class="btn-group">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="fa fa-2x fa-border fa-user"></i> <!-- put this inside the a element to bind it to the text -->
            Frank
            <span class="glyphicon glyphicon-chevron-down"></span> <!-- bootstrap used the class "caret" to designate a dropdown, but you can change it with a glyphicon if you need to -->
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Choice1</a></li>
            <li><a href="#">Choice2</a></li>
            <li><a href="#">Choice3</a></li>
          </ul>
    </div>

示例:http://www.bootply.com/f9WYqJqLmd