在导航栏中的单独行上对齐名字和姓氏答案

【问题标题】：Align firstname and lastname on seperate lines in navbar在导航栏中的单独行上对齐名字和姓氏
【发布时间】：2016-05-15 09:09:02
【问题描述】：

我有一个示例导航栏，我希望在这里为自己修改。目前，用户的全名位于同一行，如下所示：

如何更改全名位置，以便它们像这样显示和对齐：

我创建了一个无序列表，但我认为这在语义上是不正确的，我们不能在链接中放置 ul。它也不能在 IE 中工作，所以我又回到了原点。

任何想法都会有所帮助。

body {
 padding-top: 102px;
 background-color: #4d4d4d;
 font-family: 'Lato', verdana, sans-serif;
 color: #010101;
}
.container {
 width: 1530px;
 margin-top: 0;
}
.navbar-fixed-top {
 background-color: #fff;
}
.navbar-default .navbar-header {
 min-height: 80px;
}
.navbar-default .navbar-header button.hamburger-icon {
 margin-top: 20px;
}
.navbar-default .navbar-brand {
 color: #010101;
 padding-top: 5px;
}
/* searchbox */
.navbar-nav > .dropdown.search .input-group {
 padding-top: 15px;
}
.navbar-nav > .dropdown.search .input-group input.form-control {
 padding: 0 10px 0 0;
 background-color: #fff;
 color: #010101;
 border-radius: 0;
 border: 0;
 box-shadow: none;
 font-size: 16px;
 font-weight: 100;
}
.navbar-nav > .dropdown.search .input-group input.form-control:hover {
 background-color: #fff;
}
.navbar-nav > .dropdown.search .input-group-btn button {
 padding: 2px;
 border: 0;
 box-shadow: none;
 background-color: #fff;
 border-radius: 0;
}
.navbar-nav > .dropdown.search .input-group-btn button:hover {
 background-color: #fff;
 color: #ff5500;
}
.navbar-nav > .dropdown.search .input-group-btn .glyphicon-search {
 font-size: 22px;
}
/* bell notification and dropdown */
.navbar-default .navbar-nav > .open > a.inbox,
.navbar-default .navbar-nav > .open > a.inbox:focus,
.navbar-default .navbar-nav > .open > a.inbox:hover {
 background-color: #fff;
 padding-top: 15px;
 margin-bottom: 5px;
}
.nav > li.dropdown.bell > a:hover,
.nav > li.dropdown.bell > a:focus {
 color: #ff5500;
 background-color: transparent;
}
.navbar-nav > .dropdown.bell li a:hover {
 color: #ff5500;
 background-color: transparent;
}
.navbar-nav > .dropdown.bell .badge-count {
 background: #ff5500;
 margin-top: -24px;
 margin-left: -20px;
 height: 1.7em;
}
.navbar-nav > li > .dropdown-menu.bell {
 background-color: #f8f8f8;
 border-radius: 0;
}
.navbar-nav > li > .dropdown-menu.bell li a {
 padding-top: 5px;
 padding-bottom: 5px;
 white-space: normal !important;
 width: 350px;
}
.navbar-nav > li > .dropdown-menu.bell li a span.info {
 display: block;
 padding: 0 5px 0 5px;
}
.navbar-nav > li > .dropdown-menu.bell li.divider {
 padding: 0;
 margin: 0 20px;
}
.navbar-nav > li > .dropdown-menu.bell .label {
 background-color: transparent;
 color: #aaa;
 font-weight: 100;
}
/* bell notification and dropdown caret */
.navbar-nav > li > .dropdown-menu.bell:before {
 position: absolute;
 top: -10px;
 right: 9%;
 display: inline-block;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #ccc;
 border-left: 10px solid transparent;
 border-bottom-color: rgba(0, 0, 0, 0.2);
 content: '';
}
.navbar-nav > li > .dropdown-menu.bell:after {
 position: absolute;
 top: -9px;
 right: 9%;
 display: inline-block;
 border-right: 9px solid transparent;
 border-bottom: 9px solid #f8f8f8;
 border-left: 9px solid transparent;
 content: '';
}
/* create profile button */
.navbar-nav > .dropdown.create-profile a.create-profile-btn {
 width: 200px;
 padding: 12px;
 margin-top: 18px;
}
.navbar-nav > .dropdown.create-profile a.btn-default {
 background-color: #ff5500;
 border-color: #ff5500;
 color: #fff;
}
.navbar-nav > .dropdown.create-profile a.btn-default:hover,
.navbar-nav > .dropdown.create-profile a.btn-default:focus,
.navbar-nav > .dropdown.create-profile a.btn-default:active {
 color: #fff;
 border-color: 0;
 /*set the color you want here*/
}
/* user login and dropdown */
.navbar-nav > .user-logged-in span.firstname {
 font-size: 16px;
 color: #010101;
}
.navbar-nav > .user-logged-in span.surname {
 font-size: 16px;
 color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list {
 width: 100%;
 border-radius: 0;
 border: 0;
 background-color: #f8f8f8;
 font-size: 14px;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a {
 margin: 5px 0px;
 color: #010101;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li a:hover {
 background-color: transparent;
 color: #ff5500;
}
.navbar-nav > .user-logged-in .dropdown-menu.access-list li.divider {
 padding: 0;
 margin: 0 20px;
}
.fullname {
 float: right;
 padding-right: 10px;
}
.drop-arr {
 float: right;
 padding-top: 10px;
}
span.avatar {
 padding-right: 90px;
}
/* Large desktop */
@media (max-width: 1590px) {
 .container {
   width: auto;
 }
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
 .container {
   width: auto;
 }
 .navbar-default .navbar-brand {
   font-size: 40px;
 }
 /* bell notification and dropdown */
 .navbar-default .navbar-nav > .open > a.inbox,
 .navbar-default .navbar-nav > .open > a.inbox:focus,
 .navbar-default .navbar-nav > .open > a.inbox:hover {
   width: 100% !important;
   background-color: #e7e7e7;
   margin-bottom: 0px;
 }
 .navbar-nav > li > .dropdown-menu.bell li a {
   width: 100%;
 }
 .navbar-nav > li > .dropdown-menu.bell:before,
 .navbar-nav > li > .dropdown-menu.bell:after {
   display: none;
 }
 .navbar-nav > li > .dropdown-menu.bell li a {
   text-align: left;
 }
 .navbar-nav > .dropdown.bell,
 .navbar-nav > .user-logged-in {
   text-align: center;
 }
 /* searchbox */
 .navbar-nav > .dropdown.search {
   padding-left: 10px;
   padding-right: 10px;
   margin-top: 0;
   width: 100%;
   overflow: hidden;
 }
 .navbar-nav > .dropdown.search .input-group {
   padding-top: 0;
 }
}
/* Landscape phones and down */
@media (max-width: 480px) {
 .navbar-default .navbar-brand {
   font-size: 30px;
 }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>


<div class="container">
  <div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <h1>
				<a href="#" class="navbar-brand"><img src="logo.png" height="30" width="180"></a>
			</h1>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">

          <!-- search bar -->
          <li class="dropdown search">
            <form class="navbar-form" role="search">
              <div class="input-group">
                <input type="text" class="form-control" placeholder="Search name or keyword" name="q">
                <div class="input-group-btn">
                  <button class="btn btn-default" type="submit">
                    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
                  </button>
                </div>
              </div>
            </form>
          </li>

          <!-- notification bell -->
          <li class="dropdown bell">
            <a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
              <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
              <span class="badge badge-count">1</span>
            </a>
            <ul class="dropdown-menu bell" role="menu">
              <li><a href="#"><span class="label label-default">4:00 AM</span><span class="info">Favourites Snippet</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">4:30 AM</span><span class="info">Email marketing</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#"><span class="label label-warning">5:00 AM</span>
							<span class="info">
								Subscriber focused email design
								Extra sample line
								Extra sample line
								Extra sample line
							</span></a>
              </li>
              <li class="divider"></li>
              <li><a href="#" class="text-center">View All</a>
              </li>
            </ul>
          </li>

          <!-- create profile button -->
          <!-- <li class="dropdown create-profile">
					<a class="btn btn-default btn-lg create-profile-btn" href="#" role="button">Create a profile</a>
				</li> -->

          <!-- user login information -->
          <li class="dropdown user-logged-in">
            <a href="#" class="dropdown-toggle username" data-toggle="dropdown">
              <span class="avatar"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
              <span class="drop-arr"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
              <span class="fullname">
							<span class="firstname">Jacky</span>
              <br><span class="surname">Smith</span>
              </span>

            </a>

            <ul class="dropdown-menu access-list" role="menu">
              <li><a href="#">ssdfsdf</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">fsfsdfs</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">sfsfsf</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">fsdfsdsd</a>
              </li>
              <li class="divider"></li>
              <li><a href="#">dlfjsdlfjs</a>
              </li>
            </ul>
          </li </ul>
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>dfsjfhskfs</p>


      <!-- <div class="chevron right">
			  <a href="#"></a>
			</div>

			<div style="height: 1em;">
			</div> -->




    </div>
  </div>
</div>

</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

一个简单的 就可以了：

<span>First Name </br> <strong>Last Name<strong> </span>

【讨论】：

如何为 IE 解决这个问题，中断将其推倒
html和css不一样，能再看看sn-p吗？
 是无效的语法。您可以使用  或 。
@Krystyna 我明白你的意思。也许.navbar-nav > li > a.dropdown-toggle 应该可以解决问题

【解决方案2】：

.navbar-login {
  width: 305px;
  padding: 10px;
  padding-bottom: 0px;
}
.navbar-login-session {
  padding: 10px;
  padding-bottom: 0px;
  padding-top: 0px;
}
.icon-size {
  font-size: 87px;
}
.glyphicon-user {
    position: absolute !important;
    margin: -5px 0 0;
    left: 5px;
    top: 50% !important;
}
.glyphicon-chevron-down {
    position: absolute !important;
    margin: -5px 0 0;
    right: 5px;
    top: 50% !important;
}
.dropdown .dropdown-toggle {
    position: relative;
    padding-right: 35px;
    padding-left: 35px;
 }

 .name {
    display: block;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>


<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a target="_blank" href="#" class="navbar-brand">My sApp.</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Inicio</a>
        </li>
        <li class="active"><a href="http://bootsnipp.com/snippets/featured/nav-account-manager" target="_blank">Inspirado en este ejemplo</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">DropDown
                    <span class="caret"></span>
                    </a>
          <ul class="dropdown-menu">
            <li><a href="#">Link 2</a>
            </li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle text-right username" data-toggle="dropdown">
            <span class="glyphicon glyphicon-user"></span>
            <span class="name">Nombre</span>
            <strong class="name">lastname</strong>
            <span class="glyphicon glyphicon-chevron-down"></span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <div class="navbar-login">
                <div class="row">
                  <div class="col-lg-4">
                    <p class="text-center">
                      <span class="glyphicon glyphicon-user icon-size"></span>
                    </p>
                  </div>
                  <div class="col-lg-8">
                    <p class="text-left"><strong>Nombre Apellido</strong>
                    </p>
                    <p class="text-left small">correoElectronico@email.com</p>
                    <p class="text-left">
                      <a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>
                    </p>
                  </div>
                </div>
              </div>
            </li>
            <li class="divider"></li>
            <li>
              <div class="navbar-login navbar-login-session">
                <div class="row">
                  <div class="col-lg-12">
                    <p>
                      <a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>
                    </p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>

【讨论】：

@Muhammed Usman，html 和 css 不同，我现在更新了，你能看看我如何在 IE 中解决这个问题吗？？
@Krystyna 添加span.avatar {flaot: left;}
@Muhammed 这不起作用，下拉菜单受到影响并且背景悬停被搞砸了
@Krystyna .navbar-nav > li > a.dropdown-toggle {overflow: hidden;} 将修复后台问题
@Muhammed，我认为这行得通！ overflow: hidden 即使没有 float: left 也可以工作，所以我认为这很好，你觉得呢？

【解决方案3】：

你可以通过稍微改变它的结构来做到这一点：

    <span class="nombre">
      <span>Nombre</span>
      <span><strong>lastname</strong></span>
    </span>

以及相关的CSS：

.username .nombre {width: 75px; display: inline-block; text-align: right; margin-right: 10px;}
.glyphicon { vertical-align: top; padding-top: 15px; }
.glyphicon:first-child { padding-top: 10px}

See this fiddle

【讨论】：

你能在链接中放一个 div 吗？？
你是对的，它在语义上是不正确的。我把它改成了span stackoverflow.com/questions/9089953/…
这很好，但是如果用户的名字/姓氏很长怎么办？它不应该有这样的宽度，它应该自动做宽度
好的，在这种情况下，您可以删除宽度并在span 中添加  ：jsfiddle.net/x7r2g36f/5
我更新了html和css，现在看一下...名称在IE中无法正常工作...

【解决方案4】：

<span style="float:right">Nombre</span>
<p class="clear">
        <span style="float:right"><strong>lastname</strong></span>

在css中添加

    clear: both;
    height: 0;
    margin: 0;
    padding: 0;

并在这种情况下使用它:)

你也可以使用类似的东西

<span style="float:right">Nombre</span>
    <br/>
    <span style="float:right"><strong>lastname</strong></span>

但我认为这会使他们分开太多

【讨论】：