2017-05-09 70 views
-2

我正在嘗試創建引導面板。我想要將展開面板的鏈接對齊到面板標題的左側或中間,並且我想要一條消息告訴用戶單擊展開對齊到右側。我該怎麼做呢。我試過顯示一切內聯和使用清除:無,但這似乎並沒有爲我工作。如何在同一行上將一個h1和一個h3標籤左對齊和右對齊

這裏是我的html代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <style> 
     body { 
     background-color: gray; 
     padding: 25px; 
     } 
     .bg_gray { 
     background-color: rgb(237, 14, 40); 
     color: white; 
     padding: 15px; 
     } 
     .bg_gray a { 
     color: white; 
     text-decoration: underline; 
     } 
     .navbar { 
     background-color: red; 
     color: white; 
     } 
     .panel-title a{ 
     color: rgb(237, 14, 40); 
     display: inline; 
     clear: none; 
     } 
     .panel-body { 
     background-color: rgb(237, 14, 40); 
     color: white; 
     } 
     .panel { 
     background-color: white; 
     color: rgb(237, 14, 40); 
     } 
     .lg_expand { 
     font-size: 1.5em; 
     display: inline; 
     clear: none; 
     text-align: left; 
     } 
     .sm_expand { 
     font-size: .8em; 
     display: inline; 
     clear: none; 
     text-align: right; 
     } 
    </style> 
    <meta charset="utf-8"> 
    <title>Phillies First Round Draft Success</title> 
    </head> 
    <body> 
    <div class = "container bg_gray"> 
     <nav class = "navbar navbar-inverse navbar-fixed-top"> 
     <div class = "container"> 
      <a class = "navbar-brand" href = "home.html">PhillyPhigures.com</a> 
      <ul class = "nav navbar-nav"> 
      <li><a href = "phillies_articles.html">Phillies</a></li> 
      <li><a href = "eagles_articles.html">Eagles</a></li> 
      <li><a href = "flyers_articles.html">Flyers</a></li> 
      <li><a href = "sixers_articles.html">Sixers</a></li> 
      </ul> 
     </div> 
     </nav> 
     <center><h1>Do the Phillies Draft Successfully in the First Round?</h1></center> 
     <center><h4>~Tyler Grim | May 8, 2017</h4></center> 
     <hr/> 
     <p>With the Major League Baseball Amateur Draft set for June 12, 2017, 
     and the Philadelphia Phillies holding the 8th pick in that draft, 
     many Phillies fans are left wondering whether the next big thing will 
     be brought to Philadelphia.</p> 
     <p>Last season, the Phillies drafted Mackenzie "Mickey" Moniak with the 
     first overall pick in the 2016 MLB Draft. Moniak joined Pat Burrell as 
     the only players selected first overall by the Phillies in the amateur 
     draft. Burrell had a long successful career with the Phillies after 
     being drafted #1 overall in 1995 Amateur Draft. Phillies fans would be more 
     than pleased to see Moniak produce the way Burrell did in his nine seasons 
     with Philadelphia. 
     </p> 
     <hr/><center>Pat Burrell Career Phillies Stats</center><hr/> 
     <table class = "table"> 
     <tr> 
      <th>Years</th><th>WAR</th><th>AB</th><th>R</th><th>H</th><th>2B</th><th>3B</th><th>HR</th><th>RBI</th><th>BA</th><th>OBP</th><th>SLG</th> 
     </tr> 
     <tr> 
      <td>9</td><td>18.8</td><td>4535</td><td>655</td><td>1166</td><td>253</td><td>14</td><td>251</td><td>827</td><td>.257</td><td>.367</td><td>.485</td> 
     </tr> 
     </table> 
     <hr/><center>Stats Courtesy of <a href = "http://www.baseball-reference.com">Baseball-Reference</a></center><hr/> 
     <p>However, have the Phillies always enjoyed success in drafting in the first round of the amateur draft Let's take a look at the 
     Phillies recent first round draft picks to see how they've performed.</p> 
     <div class = "panel-group"> 
     <div class = "panel panel-default"> 
      <div class = "panel-heading"> 
      <h4 class = "panel-title"> 
       <a data-toggle="collapse" href="#collapse1"> 
       <h1 class = "lg_expand"><strong>2016</strong>: Mickey Moniak | OF | Costa Canyon HS, CA</h1> 
       </a> 
       <h3 class = "sm_expand">(click to expand)</h3> 
      </h4> 
      </div> 
      <div id="collapse1" class="panel-collapse collapse"> 
      <div class = "panel-body"> 
       <p>Moniak is currently the Phillies second rated prospect, behind only JP Crawford, and is the #16 prospect in all of baseball. 
       Moniak projects to be a future outfielder in the Phillies system and has turned heads so far in the Gulf Coast League and 
       with Lakewood. Moniak currently sports a BA/OBP/SLG of .283/.339/.394, in 28 games with Lakewood so far in 2017.</p> 
      </div> 
      </div> 
     </div> 
     </div> 

回答

0

應用float: leftH1float: rightH3,同時加入一個空白的div之前H4關閉標籤,它clear: both應該這樣做。另外,如果你喜歡,你可以設置該div來設置自定義邊距。

像這樣的事情?:

https://codepen.io/anon/pen/GmyyJP

+0

應該在空白格被打開,H4前結束? – tygrim

+0

是的,在上面的例子中,它是'

' – Smit

相關問題