2017-08-11 12 views
1

「何時からですか?」という文字の間のスペースを減らしたいのですが、負のマージンを使って「John Appleseed」を少し使います。クラスchat-sampleとその上の要素の間。マイナスのマージンを使用しましたが、効果はありません。CSS上の余白が負の値になっています。

.panel-heading h1 { 
 
\t padding-bottom: 0.65em; 
 
\t color: #3399ff; 
 
\t font-weight: bold; 
 
} 
 

 
.col-xs-12 { 
 
\t padding-left: 0; 
 
\t padding-right: 0; 
 
} 
 

 
.chats { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.chats a { 
 
\t display: block; 
 
\t color: #000; 
 
\t text-decoration: none; 
 
} 
 

 
.chats .sender.left { 
 
\t margin-left: 10px; 
 
} 
 

 
.chats .chat-sample { 
 
\t clear: both; 
 
\t margin-left: 35px; 
 
\t margin-top: -15px; 
 
} 
 

 
.glyphicon-user { 
 
    font-size: 25px; 
 
    color: #3399ff; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class='panel panel-default'> 
 
\t \t \t \t \t <div class='panel-heading'> 
 
\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 left 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> Thursday</small></div> 
 
\t \t \t \t \t \t \t \t \t <p class='chat-sample text-muted'>What time is it?</p> 
 
\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>

+0

誤植'glyphicon glyphicon-user' ' – j08691

+0

@ j08691thanks。まだ同じ結果 –

+0

ああ私はちょうどそれを解決としてそれを示唆していないそれに気づいていた – j08691

答えて

2

代わりのclear: both次のことを行う必要があり、単にclear: right、その後、あなたは、関連するパディングトップを使用することができます= <スパンクラス `で

.panel-heading h1 { 
 
\t padding-bottom: 0.65em; 
 
\t color: #3399ff; 
 
\t font-weight: bold; 
 
} 
 

 
.col-xs-12 { 
 
\t padding-left: 0; 
 
\t padding-right: 0; 
 
} 
 

 
.chats { 
 
\t list-style-type: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
.chats a { 
 
\t display: block; 
 
\t color: #000; 
 
\t text-decoration: none; 
 
} 
 

 
.chats .sender.left { 
 
\t margin-left: 10px; 
 
} 
 

 
.chats .chat-sample { 
 
\t clear: right; 
 
\t margin-left: 35px; 
 
    padding-top: 5px; 
 
} 
 

 
.glyphicon-user { 
 
    font-size: 25px; 
 
    color: #3399ff; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class='panel panel-default'> 
 
\t \t \t \t \t <div class='panel-heading'> 
 
\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 left 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> Thursday</small></div> 
 
\t \t \t \t \t \t \t \t \t <p class='chat-sample text-muted'>What time is it?</p> 
 
\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>

+0

私はこの答えが好きです、ありがとう!負のマージンがうまくいかなかった理由は何ですか? –

+0

あなたはクリアを使用しているので、これは何をすべきか...要素をクリアします。 – Dekel

+0

これは私の(削除された)ソリューションよりもはるかに優れています! – Jonathan

関連する問題