Question

我有一个名为chat-sample的div，有两个元素，一个向左浮动，另一个向右浮动：

<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的其他消息处于同一位置。

＆＃13;

.glyphicon-user {
    font-size: 25px;
    color: #3399ff;
    margin-left: 15px;
}

.panel-heading {
	position: -webkit-sticky;
  	position: -moz-sticky;
  	position: -ms-sticky;
  	position: -o-sticky;
  	position: sticky;
	width: 100%;
	z-index: 99999;
	top: 0;
}

.panel-heading h1 {
	padding-bottom: 0.65em;
	color: #3399ff;
	font-weight: bold;
}

.panel-body {
	padding: 0;
}

.col-xs-12 {
	padding-left: 0;
	padding-right: 0;
}

.chats {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.chats li {
	border-bottom: 2px solid #eee;
}

.chats a {
	display: block;
	color: #000;
	text-decoration: none;
	height: 85px;
	padding: 15px 0;
}

.chats a:hover,
.chats a:hover .glyphicon-user,
.chats a:hover .text-muted {
	background-color: #3399ff;
	color: white;
}

.chats .sender {
	margin-left: 10px;
}

.chats .timestamp {
	margin-right: 15px;
}

.chats .chat-sample {
	clear: right;
	margin-left: 50px;
	padding-top: 5px;
}

.chat-sample p {
	margin-right: 120px;
}

.chats .delete {
	margin-right: 30px;
	margin-top: 15px;
}

.chats li:last-child {
	border-bottom: none;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
		<div class='row'>
			<div class='col-sm-6 col-xs-12 col-centered'>
				<div class='panel panel-default'>
					<div class='panel-heading sticky'>
						<div class='btn-group pull-left'>
							<div class='dropdown'>
								<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
									<span class='glyphicon glyphicon-cog'</span>
								</button>
								<ul class='dropdown-menu'>
									<li><a href='#'>Delete All Chats</a></li>
									<li><a href='#'>Log Out</a></li>
								</ul>
							</div>
						</div>
						<div class='btn-group pull-right'>
							<div class='dropdown'>
								<button class='btn btn-default btn-xs dropdown-toggle' data-toggle='dropdown' type='button'>
									<span class='glyphicon glyphicon-plus'></span>
								</button>
								<ul class='dropdown-menu dropdown-menu-right'>
									<li><a href='#'>New Chat</a></li>
								</ul>
							</div>
						</div>
						<h1 class='panel-title text-center'>FunChat</h1>
					</div>
					<div class='panel-body'>
						<ul class='chats'>
							<li>
								<a href='#'>
									<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
									<div class='sender pull-left'><strong>John Appleseed</strong></div>
									<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
									<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>
								</a>
							</li>
							<li>
								<a href='#'>
									<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
									<div class='sender pull-left'><strong>Teacher</strong></div>
									<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
									<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>
								</a>
							</li>
							<li>
								<a href='#'>
									<div class='chat-img pull-left'><span class='glyphicon glyphicon-user'></span></div>
									<div class='sender pull-left'><strong>Boss</strong></div>
									<div class='timestamp text-muted pull-right'><small><span class='glyphicon glyphicon-time'></span> 08/12/2016</small></div>
									<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>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div><!--end column-->
		</div><!--end row 1-->
</div><!--end container-->

＆＃13;

Answer 1

在css中尝试以下更改：

.chat-sample p {
   /* margin-right: 120px; */
   width: 80%;
}

希望这有帮助。

Answer 2

为了避免此类问题，您可以将固定的width应用于<p>元素，而不是.chat-sample p { width: <yourPreferedSize> px/%; }。

width

如果您有一个固定的尺寸，并希望准备好响应，请确保为每个屏幕尺寸更新<a>。

<强>更新：

建议：尝试避免元素的固定高度，例如代码中的<p>。当您在子元素（示例中为<a>）和父元素（<p>）的固定高度上具有固定宽度时，如果var data = {'name': 'john', 'old': 18, 'place': 'USA'} var ary = ['First Name', 'age', 'country'] // create key-value pairs array var obj_entries = Object.entries(data) var new_data =ary.reduce((acc, value, idx)=>{ acc[value]=obj_entries[idx][1]; return acc; }, {}) console.log(new_data)中的内容非常长，则设计将会中断。

您已使用修复程序here更新了CSS。

Margin-right在bootstrap中不使用右浮动元素

2 个答案: