在导航栏中的单独行上对齐名字和姓氏
Posted
技术标签:
【中文标题】在导航栏中的单独行上对齐名字和姓氏【英文标题】：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" ></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" 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" 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" ></span>
<span class="drop-arr"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" ></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>【问题讨论】：
【参考方案1】：一个简单的</br> 就可以了：
<span>First Name </br> <strong>Last Name<strong> </span>
【讨论】：
如何为 IE 解决这个问题，中断将其推倒 html和css不一样，能再看看sn-p吗？</br> 是无效的语法。您可以使用<br> 或<br />。
@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 ***.com/questions/9089953/…
这很好，但是如果用户的名字/姓氏很长怎么办？它不应该有这样的宽度，它应该自动做宽度
好的，在这种情况下，您可以删除宽度并在span 中添加<br/> ：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>
但我认为这会使他们分开太多
【讨论】：
以上是关于在导航栏中的单独行上对齐名字和姓氏的主要内容，如果未能解决你的问题，请参考以下文章