如何在同一行左右对齐一个h1和一个h3标签

Question

我正在尝试创建 bootstrap 面板。我想将扩展面板的 link 对齐到面板标题的左侧或中心，我想要一条消息告诉用户单击以展开到右侧对齐。我该怎么做呢。我试过内联显示所有内容并使用 clear:none，但这似乎对我不起作用。

这是我的 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>

Answer 1

将 float: left 应用于 h1 并将 float: right 应用于 h3，同时添加空白 div 就在 h4 结束标记之前 clear: both 应该这样做。此外，您可以根据需要设置 div 的样式以设置自定义边距。

是这样的吗？:

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

如何在同一行左右对齐一个h1和一个h3标签

How to align one h1 and one h3 tag left and right on the same line

html

css

text-align

twitter-bootstrap