html - 我想将这些图像和相应的链接水平放置在同一行中。怎么做？

Question

我想将这些图像和相应的链接水平放置在同一行中。怎么做？

<section id="section-newsletters" class="section appear clearfix">
    <div class="container">

        <div class="row mar-bot40">
            <div class="col-md-offset-3 col-md-6">
                <div class="section-header">
                    <h2 class="section-heading animated" data-animation="bounceInUp">Newsletters</h2>
                    <strong><u>Issues of 2016</u></strong>
                    <p><img alt="" src="newsletters/Cover_07_01_IITG_Monitor.png" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
                    <p><a href="newsletters/07_01_IITG_Monitor.pdf">Volume VII, Issue I</a></p>
                    <strong><u>Issues of 2015</u></strong>
                    <p><img alt="" src="newsletters/Cover_06_04_IITG_Monitor.png" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
                    <p></p><a href="newsletters/06_04_IITG_Monitor.pdf">Volume VI, Issue IV</a></p>
                    <p><img alt="" src="newsletters/Newsletter July Sept 2015.png" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
                    <p></p><a href="newsletters/2015 July Sept.pdf">Volume VI, Issue III</a></p>
                    <p><img alt="" src="newsletters/Newsletter April June 2015.png" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
                    <p><a href="newsletters/2015 April-June.pdf">Volume VI, Issue II</a></p>
                    <p><img alt="" src="newsletters/Newsletter Jan Mar 2015.png" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
                    <p><a href="newsletters/2015 Jan Mar.pdf">Volume VI, Issue I</a></p>

                </div>
            </div>
        </div>

    </div>
</section>

Answer 1

利用 float:left 和一些边距，这是你想要的吗？

.pull-left {
  float: left;
}

.ml-10 {
  margin-left: 10px;
}

.clearer {
  clear: both;
}

<section id="section-newsletters" class="section appear clearfix">
  <div class="container">

    <div class="row mar-bot40">
      <div class="col-md-offset-3 col-md-6">
        <div class="section-header">
          <h2 class="section-heading animated" data-animation="bounceInUp">Newsletters</h2>

          <strong><u>Issues of 2016</u></strong>

          <div class="clearer"></div>
          <p class="pull-left"><img alt="" src="http://lorempixel.com/90/125/" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
          <p class="pull-left ml-10"><a href="newsletters/07_01_IITG_Monitor.pdf">Volume VII, Issue I</a></p>
          <div class="clearer"></div>


          <strong><u>Issues of 2015</u></strong>

          <div class="clearer"></div>
          <p class="pull-left"><img alt="" src="http://lorempixel.com/90/125/" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
          <p class="pull-left ml-10"><a href="newsletters/06_04_IITG_Monitor.pdf">Volume VI, Issue IV</a></p>
          <div class="clearer"></div>

          <p class="pull-left"><img alt="" src="http://lorempixel.com/90/125/" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
          <p class="pull-left ml-10"><a href="newsletters/2015 July Sept.pdf">Volume VI, Issue III</a></p>
          <div class="clearer"></div>


          <p class="pull-left"><img alt="" src="http://lorempixel.com/90/125/" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
          <p class="pull-left ml-10"><a href="newsletters/2015 April-June.pdf">Volume VI, Issue II</a></p>
          <div class="clearer"></div>

          <p class="pull-left"><img alt="" src="http://lorempixel.com/90/125/" style="width: 90px; height: 117px; border-width: 1px; border-style: solid;" /></p>
          <p class="pull-left ml-10"><a href="newsletters/2015 Jan Mar.pdf">Volume VI, Issue I</a></p>

        </div>
      </div>
    </div>

  </div>
</section>