2017-04-12 71 views
0

剛開始編碼所有東西從頭開始廣告擊中了一塊路障。 努力讓字形對齊到左側div的頂部,並且不知道我要出錯的地方。如何正確對齊Bootstrap中的LI類?

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>B01 Media- Admin Panel</title> 

    <!-- Bootstrap --> 
    <link href="../css/animate.css" rel="stylesheet" /> 
    <link href="../css/bootstrap-theme.css" rel="stylesheet" /> 
    <link href="../css/bootstrap.css" rel="stylesheet" /> 
    <link href="../css/font-awesome.min.css" rel="stylesheet" /> 
    <link href="../css/magnific-popup.css" rel="stylesheet" /> 
    <link href="../css/owl.carousel.css" rel="stylesheet" /> 
    <link href="../css/owl.theme.css" rel="stylesheet" /> 
    <link href="../css/preload.css" rel="stylesheet" /> 
    <link href="../css/responsive.css" rel="stylesheet" /> 
    <link href="../css/YTPlayer.css" rel="stylesheet" /> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

    <link href="admin.css" rel="stylesheet" /> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 

    <div class="container-fluid display-table"> 
    <div class="row display-table-row"> 
     <div class="col-md-2 display-table-cell valign-top" id="side-menu"> 
     <h1>Navigation Area</h1> 
     <ul> 
      <li class="link"> 
      <a href="Index.html"> 
       <span class="glyphicon glyphicon-th" aria-hidden="true"></span> 
       <span>Dashboard</span> 
      </a> 
      </li> 

      <li class="link"> 
      <a hef="#collapse-post" data-toggle="collapse" aria-controls="collapse-post"> 
       <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 
       <span>Articles</span> 
       <span class="label label-sucess pull-right">20</span> 
      </a> 
      <ul class="collapse collapsable" id="collapse-post"> 
       <li><a href="new-articles.html">Create New</a></li> 
       <li><a href="articles.html">View Articles</a></li> 
      </ul> 
      </li> 

      <li class="link"> 
      <a hef="#collapse-comments" data-toggle="collapse" aria-controls="collapse-comments"> 
       <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 
       <span>Comments</span> 
      </a> 
      <ul class="collapse collapsable" id="collapse-comments"> 
       <li> 
       <a href="Approved.html">Approved 
        <span class="label label-success pull-right">10</span> 
       </a> 
       </li> 

       <li> 
       <a href="Unapproved.html">Unapproved 
        <span class="label label-warning pull-right">10</span> 
       </a> 
       </li> 
      </ul> 
      </li> 

      <li class="link"> 
      <a href="commenters.html"> 
       <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
       <span>Comments</span> 
      </a> 
      </li> 

      <li class="link"> 
      <a href="tags.html"> 
       <span class="glyphicon glyphicon-tags" aria-hidden="true"></span> 
       <span>Tags</span> 
      </a> 
      </li> 

      <li class="link"> 
      <a href="Settings.html"> 
       <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> 
       <span>Settings</span> 
      </a> 
      </li> 
     </ul> 
     </div> 

     <div class="col-md-10 display-table-cell valign-top box"> 
     <div class="row"> 
      <header id="nav-header" class="clearfix"> 
      <div class="col-md-5"> 
       <input type="text" id="header-search-field" placeholder="Search for anything" /> 
      </div> 

      <div class="col-md-7"> 
       <ul class="pull-right"> 
       <li class="welcome">Welcome to your administration area</li> 
       <li class="fixed-width"> 
        <a href="#"> 
        <span class="glyphicon glyphicon-bell" aria-hidden="true"></span> 
        <span class="label label-warning">3</span> 
        </a> 
       </li> 

       <li class="fixed-width"> 
        <a href="#"> 
        <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> 
        <span class="label label-message">3</span> 
        </a> 
       </li> 

       <li> 
        <a href="#" class="logout"> 
        <span class="glyphicon glyphicon-logout" aria-hidden="true"></span> 
        logout 
        </a> 
       </li> 
       </ul> 
      </div> 
      </header> 
     </div> 

     <div class=row> 
      <footer id="admin-footer" class="clearfix"> 
      <div class="pull -left"> Copyright 2017</div> 
      <div class="pull-right"> B01 Media- Blog Admin Panel</div> 
      </footer> 
     </div> 
     </div> 
    </div> 
    </div> 


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html> 
</html> 

CSS

html, body { 
    font-family: "open sans", "helvetica neue",Arial, Helvetica, sans-serif; 
    background-color: #f3f3f4; 
    color: #676a6c; 
    height: 100%; 
} 

.box { 
    border: 3px red dotted; 
} 

#side-menu { 
    background-color: #2f4050; 
    padding: 0px; 
} 

    #side-menu h1 { 
    color: #1f3647; 
    text-align: center; 
    margin: 10px 0px; 
    font-size: 25px; 
    height: 100%; 
    } 

.display-table { 
    display: table; 
    padding: 0px; 
    height: 100%; 
    width: 100%; 
} 

.display-table-row { 
    display: table-row; 
    height: 100%; 
} 

.display-table-cell { 
    display: table-cell; 
    height: 100%; 
    float: none; 
} 

.valign-top { 
    vertical-align: top; 
} 

#nav-header { 
    background-color: #fff; 
    border-bottom: 1px solid #e7eaec; 
} 

    #nav-header #header-search-field { 
    padding-top: 17px; 
    vertical-align: central; 
    border: none; 
    width: 300px; 
    outline: none; 
    } 

    #nav-header ul { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    color: #676a6c; 
    } 

    #nav-header ul li { 
     float: left; 
     margin-left: 15px; 
     padding: 17px 0px; 
    } 

    #nav-header ul glyphicon { 
     color: #676a6c; 
    } 

.label-message { 
    background-color: #1ab394; 
} 

#nav-header ul a { 
    text-decoration: none; 
} 

#nav-header .logout { 
    color: #676a6c; 
} 

    #nav-header .logout:hover { 
    color: #676a6c; 
    } 

#nav-header #welcome { 
    margin-right: 20px; 
} 

#nav-header ul .label { 
    position: absolute; 
    margin-top: -10px; 
    margin-left: -5px; 
} 

#nav-header .fixed-width { 
    width: 35px; 
} 

#admin-footer { 
    position: absolute; 
    width: 100px; 
    bottom: 0px; 
    background-color: #fff; 
    padding: 10px; 
    font-size: 12px; 
    color: #676a6c; 
} 

幫助非常感謝。

+0

是_all_ HTML和_all_表示您的問題需要CSS _really_嗎? –

+0

是的!!!!!!!!!!!! – StefanBob

回答

0

嘗試從#side-menu h1開始取height: 100%;。這會將您的圖標置於導航區域框內而不是其下面

#side-menu h1 { 
    height: auto; 
} 
+0

Stefan你是一個傳奇,非常感謝 – Ed8686