Question

我已经在我的HTML页面中添加了推文，但我希望将这两条推文并排。

样式代码：

<head>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body,h1 {font-family: "Raleway", Arial, sans-serif}
        h1 {letter-spacing: 6px}
        .w3-row-padding img {margin-bottom: 12px}
    </style>
</head>

我的代码是：

    <p style="text-align: center;">&nbsp;</p>
    <p style="text-align: center;">In this area you can easily see tweets about movies!</p>
    <p style="text-align: center;">Have fun!</p>



        <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a> <a href="EXAMPLE">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


        <blockquote class="twitter-tweet"><p lang="en" dir="ltr">10 years before Kirk, Spock and the Enterprise, there was <a href="https://twitter.com/hashtag/Discovery?src=hash">#Discovery</a>.  <a href="EXAMPLE2">pic.twitter.com/wrKF3KXeOT</a></p>&mdash; IMDb (@IMDb) <a href="https://twitter.com/IMDb/status/864981989358657536">May 17, 2017</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

在下面的示例中，我希望将这两个推文并排。

Answer 1

在<style>添加类twitter-tweet

.twitter-tweet{
    display:inline-block;
}

blockquote是一个块元素，你想要它们内联

Answer 2

如果您使用像Bootstrap这样的框架，您可以将元素包装在<div class="row">中，然后将class="col-sm-6"添加到每个元素的标记中。这会将元素分组成一行，并为它们预定宽度。

Answer 3

选项1：

.twitter-tweet {
  display: inline-block !important;
}

body,
h1 {
  font-family: "Raleway", Arial, sans-serif
}

h1 {
  letter-spacing: 6px
}

.w3-row-padding img {
  margin-bottom: 12px
}

.twitter-tweet {
  display: inline-block !important;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">In this area you can easily see tweets about movies!</p>
<p style="text-align: center;">Have fun!</p>



<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a>    <a href="EXAMPLE">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">10 years before Kirk, Spock and the Enterprise, there was <a href="https://twitter.com/hashtag/Discovery?src=hash">#Discovery</a>.  <a href="EXAMPLE2">pic.twitter.com/wrKF3KXeOT</a></p>&mdash; IMDb (@IMDb) <a href="https://twitter.com/IMDb/status/864981989358657536">May 17, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

选项2：

twitterwidget {
  display: inline-block !important;
}

body,
h1 {
  font-family: "Raleway", Arial, sans-serif
}

h1 {
  letter-spacing: 6px
}

.w3-row-padding img {
  margin-bottom: 12px
}

twitterwidget {
  display: inline-block !important;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">In this area you can easily see tweets about movies!</p>
<p style="text-align: center;">Have fun!</p>



<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">Sunsets don&#39;t get much better than this one over <a href="https://twitter.com/GrandTetonNPS">@GrandTetonNPS</a>. <a href="https://twitter.com/hashtag/nature?src=hash">#nature</a> <a href="https://twitter.com/hashtag/sunset?src=hash">#sunset</a>    <a href="EXAMPLE">pic.twitter.com/YuKy2rcjyU</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/463440424141459456">May 5, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet">
  <p lang="en" dir="ltr">10 years before Kirk, Spock and the Enterprise, there was <a href="https://twitter.com/hashtag/Discovery?src=hash">#Discovery</a>.  <a href="EXAMPLE2">pic.twitter.com/wrKF3KXeOT</a></p>&mdash; IMDb (@IMDb) <a href="https://twitter.com/IMDb/status/864981989358657536">May 17, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

在HTML中对齐推文

3 个答案: