html - 如何在一行中设置这些 block ？

Question

我无法水平设置这些按钮。有任何想法吗？我玩这个大约 2 个小时，所以我写在这里。效果应该像下图，实际上不是。感谢您的所有回复，我很感激。

CSS

.image{

    float: right;
    height: 680px;
}


blockquote {

    background: url(http://www.studiopress.com/wp-content/uploads/bg-quote1.png) no-repeat;     
    color: #a5a4a4;
    font-style: italic;
    margin: 30px;
    padding: 30px 30px 30px 50px;     
}  




/* Google Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);


.link {
  border-bottom: 2px dotted #55acee;
  text-decoration: none;
  color: #55acee;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
}

.link:hover {
  color: #2ecc71;
  border-bottom: 2px dotted #2ecc71;
}

/* css for the shiny buttons */
.bb {
  cursor: pointer;

  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  padding: 50px;
  font-size: 22px;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -o-transition: .3s;
  display: inline-block;
}

.bb:hover {
  cursor: url(http://cur.cursors-4u.net/symbols/sym-1/sym46.cur), auto;
}
.blue {
  color: #55acee;
  border: 2px #55acee solid;
}

.blue:hover {
  background-color: #55acee;
  color: #fff
}

.green {
  color: #2ecc71;
  border: 2px #2ecc71 solid;
}

.green:hover {
  color: #fff;
  background-color: #2ecc71;
}

.red {
  color: #e74c3c;
  border: 2px #e74c3c solid;
}

.red:hover {
  color: #fff;
  background-color: #e74c3c;
}

.purple {
  color: #9b59b6;
  border: 2px #9b59b6 solid;
}

.purple:hover {
  color: #fff;
  background-color: #9b59b6;
}

.orange {
  color: #e67e22;
  border: 2px #e67e22 solid;
}

.orange:hover {
  color: #fff;
  background-color: #e67e22;
}

.yellow {
  color: #f1c40f;
  border: 2px #f1c40f solid;
}

.yellow:hover {
  color: #fff;
  background-color: #f1c40f;
}

.buttons {
  padding-top: 30px;
  text-align: center;
}




</style>

html

    <br><br><br><br>
<div class="container">

    <div class="jumbotron">


        <img class="image" src="../assets/media/img/laskaniemiecka.png">

        <div class="blockq">

            <blockquote> The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs.</blockquote>
        </div>


         <div class="buttons" style="font-family: 'Open Sans', 'sans-serif';">
            <div class="bb blue">Powtórki</div>

            <div class="bb purple">Lekcje audio</div>

        </div>







        <br><br><br><br><br>




    </div>
</div>

Answer 1

您可以添加此代码:

.buttons div {
  display: inline-block;

  /* height:80px; 
  padding: 0px 30px;
  line-height:80px; */
}