1
工作，我有一个div叫chat-sample有两个元素，一个向左浮动，另有权：保证金右不正确的浮动元素在引导
<div class='chat-sample'><p class='text-muted pull-left'>Did you know that there are only really 3 continets on earth? Please reply with interest for an explanation.</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
我想在margin-right财产该段落（有长信息时），以便垃圾桶图标不会移动到新行但不起作用。
.chat-sample p {
margin-right: 120px;
}
我希望垃圾图标与Boss和John Appleseed的其他消息处于相同位置。
.glyphicon-user {
font-size: 25px;
color: #3399ff;
margin-left: 15px;
}
.panel-heading {
\t position: -webkit-sticky;
\t position: -moz-sticky;
\t position: -ms-sticky;
\t position: -o-sticky;
\t position: sticky;
\t width: 100%;
\t z-index: 99999;
\t top: 0;
}
.panel-heading h1 {
\t padding-bottom: 0.65em;
\t color: #3399ff;
\t font-weight: bold;
}
.panel-body {
\t padding: 0;
}
.col-xs-12 {
\t padding-left: 0;
\t padding-right: 0;
}
.chats {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
}
.chats li {
\t border-bottom: 2px solid #eee;
}
.chats a {
\t display: block;
\t color: #000;
\t text-decoration: none;
\t height: 85px;
\t padding: 15px 0;
}
.chats a:hover,
.chats a:hover .glyphicon-user,
.chats a:hover .text-muted {
\t background-color: #3399ff;
\t color: white;
}
.chats .sender {
\t margin-left: 10px;
}
.chats .timestamp {
\t margin-right: 15px;
}
.chats .chat-sample {
\t clear: right;
\t margin-left: 50px;
\t padding-top: 5px;
}
.chat-sample p {
\t margin-right: 120px;
}
.chats .delete {
\t margin-right: 30px;
\t margin-top: 15px;
}
.chats li:last-child {
\t border-bottom: none;<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
\t \t <div class='row'>
\t \t \t <div class='col-sm-6 col-xs-12 col-centered'>
\t \t \t \t <div class='panel panel-default'>
\t \t \t \t \t <div class='panel-heading sticky'>
\t \t \t \t \t \t <div class='btn-group pull-left'>
\t \t \t \t \t \t \t <div class='dropdown'>
\t \t \t \t \t \t \t \t <button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
\t \t \t \t \t \t \t \t \t <span class='glyphicon glyphicon-cog'</span>
\t \t \t \t \t \t \t \t </button>
\t \t \t \t \t \t \t \t <ul class='dropdown-menu'>
\t \t \t \t \t \t \t \t \t <li><a href='#'>Delete All Chats</a></li>
\t \t \t \t \t \t \t \t \t <li><a href='#'>Log Out</a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class='btn-group pull-right'>
\t \t \t \t \t \t \t <div class='dropdown'>
\t \t \t \t \t \t \t \t <button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
\t \t \t \t \t \t \t \t \t <span class='glyphicon glyphicon-plus'></span>
\t \t \t \t \t \t \t \t </button>
\t \t \t \t \t \t \t \t <ul class='dropdown-menu dropdown-menu-right'>
\t \t \t \t \t \t \t \t \t <li><a href='#'>New Chat</a></li>
\t \t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <h1 class='panel-title text-center'>FunChat</h1>
\t \t \t \t \t </div>
\t \t \t \t \t <div class='panel-body'>
\t \t \t \t \t \t <ul class='chats'>
\t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t <a href='#'>
\t \t \t \t \t \t \t \t \t <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
\t \t \t \t \t \t \t \t \t <div class='sender pull-left'><strong>John Appleseed</strong></div>
\t \t \t \t \t \t \t \t \t <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
\t \t \t \t \t \t \t \t \t <div class='chat-sample'><p class='text-muted pull-left'>What time is it?</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t <a href='#'>
\t \t \t \t \t \t \t \t \t <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
\t \t \t \t \t \t \t \t \t <div class='sender pull-left'><strong>Teacher</strong></div>
\t \t \t \t \t \t \t \t \t <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
\t \t \t \t \t \t \t \t \t <div class='chat-sample'><p class='text-muted pull-left'>Did you know that there are only really 3 continets on earth? Please reply with interest for an explanation.</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t \t <li>
\t \t \t \t \t \t \t \t <a href='#'>
\t \t \t \t \t \t \t \t \t <div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
\t \t \t \t \t \t \t \t \t <div class='sender pull-left'><strong>Boss</strong></div>
\t \t \t \t \t \t \t \t \t <div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
\t \t \t \t \t \t \t \t \t <div class='chat-sample'><p class='text-muted pull-left'>Why aren't you at work?</p><div class='delete pull-right'><span class='glyphicon glyphicon-trash'></span></div></div>
\t \t \t \t \t \t \t \t </a>
\t \t \t \t \t \t \t </li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div><!--end column-->
\t \t </div><!--end row 1-->
</div><!--end container-->
我用一个jsfiddle链接更新了我的答案，它有一些改进的CSS，请查看它。 – moonflare