2017-08-11 1 views
1

Ich möchte den Abstand zwischen dem Text "Wie spät ist es?" und "John Appleseed" ein wenig mit einem negativen Rand. Zwischen der Klasse chat-sample und den Elementen darüber. Ich habe eine negative Marge verwendet, aber es hat keine Wirkung.CSS Negativer oberer Rand funktioniert nicht mit Schwimmern über

.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

Typo in ' ' – j08691

+0

@ j08691danke. Immer noch dasselbe Ergebnis –

+0

Oh, ich habe es nur notiert, nicht als Lösung vorgeschlagen – j08691

Antwort

2

Statt clear: both sollten Sie nur clear: right und dann können Sie die entsprechende padding-top verwenden:

.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

Ich mag diese Antwort, danke! Irgendeine Idee, warum der negative Rand nicht funktioniert hat? –

+0

Weil du das clear benutzt hast :) das ist was es tun soll ... lösche die Elemente. – Dekel

+0

Das ist viel besser als meine (gelöschte) Lösung! – Jonathan