2016-04-04 12 views
0

Ich muss eine Spanne in einem CollectionItem in der oberen rechten Ecke oder in der Mitte ausrichten, aber bleibt in der unteren Ecke, das Problem ist mit dem ersten Element. Position in der rechten oberen Ecke in MaterialiseCSS Collection

Dies ist der Code:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>The Materialize Example</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
     <style media="screen"> 
 
     .wrap { 
 
     position: relative; 
 
     display: inline-block; 
 
     } 
 

 
     .wrap span { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
     <div class="col s3 #01579b light-blue darken-4"> 
 
      <ul class="collection"> 
 
      <li class="collection-item" style="padding:5px;"> 
 
       Title 
 
       <small><br />First Line</small><span class="secondary-content wrap">17</span> 
 
      </li> 
 
      <li class="collection-item">Texto2<span class="secondary-content">2</span></li> 
 
      </ul> 
 
     </div> 
 
     <div class="col s9 #00b8d4 cyan accent-4" style="color:white;"> 
 
      bbb 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

+1

Warum nicht einfach Materialise 'right' Klasse verwenden? http://codeply.com/go/UiUFBvEIVm – ZimSystem

Antwort

0

Probieren Sie dies:

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>The Materialize Example</title> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> 
 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
 
     <style media="screen"> 
 
     .wrap { 
 
     position: relative; 
 
     display: inline-block; 
 
     } 
 

 
     .wrap span { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 0; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="row"> 
 
     <div class="col s3 #01579b light-blue darken-4"> 
 
      <ul class="collection"> 
 
      <li class="collection-item" style="padding:5px;"> 
 
       &nbsp; &nbsp; &nbsp;Title 
 
       <small><br /> &nbsp; &nbsp; &nbsp;First Line</small><span class="secondary-content wrap">17</span> 
 
      </li> 
 
      <li class="collection-item">Texto2<span class="secondary-content">2</span></li> 
 
      </ul> 
 
     </div> 
 
     <div class="col s9 #00b8d4 cyan accent-4" style="color:white;"> 
 
      bbb 
 
     </div> 
 
     </div> 
 
    </body> 
 
</html>

Verwandte Themen