首页 > javascript > 如何让这两个元素并排排列?

如何让这两个元素并排排列? (How do I get these two elements to align side by side?)

问题

我已经尝试了我能想到的一切,但这两个元素不会排成一行。我知道有很多额外的CSS,但这只是我页面上的一小段HTML。

如果您需要完整的HTML来查看我想说的内容我可以发布它,但是在原始主题中发帖太长了。

.stripe {
    background-color: #79EBC6;
    height: 100%;
    width: 100%;
}
.navbar {
    margin: 0;
    right: 0;
    position: fixed;
    z-index: 999;
    background-color: #58E4B3;
    width: 100%;
    color: white;
}
.navbar a {
    color: white;
    background-color: #58E4B3;
}
.nav li {
    float:left;
}
.centered {
    text-align: center;
}

.text {
    padding: 1rem;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    text-align: left;
    flex: 0 1 32%;
}
.cards {
    margin-top: 5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15rem;
}
.collapse {
    margin-left: 15px;
}

.jumbotron {
    width: 50%;
    margin: auto;
    background-color: #79EBC6;
}
.carousel {
    height: 25%;
    width: 50%;
    margin: auto;
    padding: 2em;
}
.tab-pane {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
}
.display-4 {
    text-align: center;
}
.fa-check {
    font-size: 1.25rem;
    padding: 1.5rem;
}
.d-flex {
    text-align: center;
    margin: auto;
}
.section {
    padding: 3rem 0;
}

.form-row {
    text-align: left;
}
.modal-body {
    text-align: left;
}
.btn-button1 {
    width: 100%;
    background-color: #58E4B3;
}
.card-body {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
    text-align: left;
}
.card-body .btn-success {
    margin-left: .5em;
}

body {
    font-family: "Asap", sans-serif;
    margin:10px;
    font-size:16px;
}

#demo {
    height:100%;
    position:relative;
    overflow:hidden;
}


.green{
    background-color:#6fb936;
}
.thumb{
    margin-bottom: 30px;
}

.page-top{
    margin-top:85px;
}
<a name="tabs"></a>
<section id="tabs" class="stripe">
  <h2 class="mb-5 text-center">Tabs and Collapse Layouts</h2>
  <div class="container page-top">
    <div class="row">
      <div class="col-md-6">
        <ul class="nav nav-tabs shadow bg-light" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
              aria-controls="one" aria-selected="true">One</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
              aria-controls="two" aria-selected="false">Two</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
              aria-controls="three" aria-selected="false">Three</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <p class="p-3">Etriers jet couleur non capotes pendant epouses violets. Ca soixante cornette ai
              exaltait. Pile des chez dut mais agit nid hein vlan. Ton arriverent indulgence vin vie
              electrique vieillards. Ans nid ici arrivons lupanars vin regiment persuada. Coups je de
              armes crise te ou. Attendu montent or malheur battant tu il ne. Ah un closes clairs ruches.
              Ne en touffe jambes gaiete courbe veilla.
            </p>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <p
              class="p-3">Voici arbre ma coups oncle abord ou en heros. Neanmoins causaient la me
              ameliorer attardent escadrons la fusillade il. Masse ouvre avons il ai quels sa et. Cependant ma
              qu frontiere seulement. Que effrayant croissent assassins son. Levee mes uns creux laque quand.
              Visages xv epouser emmener souleve il.
            </p>
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <p
              class="p-3">Societes empilait attentif eut feerique aussitot les. Nous soir vous va sous
              eaux au. En un ouvriers le physique quarante. Octogone tacherai foi fumantes toi paraitre car.
              Hagarde as en couvert ai on malheur. Minutes donnent ennemis en livides la conduit il etoffes.
              Peu coin voit vin pois cher. Executeurs pressaient on entrainait construits oh defilaient il
              decharnees. Gardait faisait escorte fatigue heureux tu humains sa. Parlaient du printemps
              sinistres causaient effrayant un laidement.
            </p>
          </div>
        </div>
      </div>
      <div id="accordion">
        <div class="card">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
              </button>
            </h5>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
              </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingThree">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
              </button>
            </h5>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


解决方法

您的结构如下所示:

<div class="row">
  <div class="col-md-6">
    <!-- tab group -->
  </div>
  <div id="accordion">
    <!-- collapsible group -->
  </div>
</div>

如果添加display: flex到父容器,.row则两个直接子项div将并排排列。

在此输入图像描述

问题

I've tried everything I can think of, but these 2 elements just won't line up. I know there is a lot of extra CSS, but this is just a snippet of HTML from my page.

If you need the full HTML to see what I'm trying to say I can post it, but it's too long to post in the original topic.

.stripe {
    background-color: #79EBC6;
    height: 100%;
    width: 100%;
}
.navbar {
    margin: 0;
    right: 0;
    position: fixed;
    z-index: 999;
    background-color: #58E4B3;
    width: 100%;
    color: white;
}
.navbar a {
    color: white;
    background-color: #58E4B3;
}
.nav li {
    float:left;
}
.centered {
    text-align: center;
}

.text {
    padding: 1rem;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    text-align: left;
    flex: 0 1 32%;
}
.cards {
    margin-top: 5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15rem;
}
.collapse {
    margin-left: 15px;
}

.jumbotron {
    width: 50%;
    margin: auto;
    background-color: #79EBC6;
}
.carousel {
    height: 25%;
    width: 50%;
    margin: auto;
    padding: 2em;
}
.tab-pane {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
}
.display-4 {
    text-align: center;
}
.fa-check {
    font-size: 1.25rem;
    padding: 1.5rem;
}
.d-flex {
    text-align: center;
    margin: auto;
}
.section {
    padding: 3rem 0;
}

.form-row {
    text-align: left;
}
.modal-body {
    text-align: left;
}
.btn-button1 {
    width: 100%;
    background-color: #58E4B3;
}
.card-body {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
    text-align: left;
}
.card-body .btn-success {
    margin-left: .5em;
}

body {
    font-family: "Asap", sans-serif;
    margin:10px;
    font-size:16px;
}

#demo {
    height:100%;
    position:relative;
    overflow:hidden;
}


.green{
    background-color:#6fb936;
}
.thumb{
    margin-bottom: 30px;
}

.page-top{
    margin-top:85px;
}
<a name="tabs"></a>
<section id="tabs" class="stripe">
  <h2 class="mb-5 text-center">Tabs and Collapse Layouts</h2>
  <div class="container page-top">
    <div class="row">
      <div class="col-md-6">
        <ul class="nav nav-tabs shadow bg-light" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
              aria-controls="one" aria-selected="true">One</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
              aria-controls="two" aria-selected="false">Two</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
              aria-controls="three" aria-selected="false">Three</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <p class="p-3">Etriers jet couleur non capotes pendant epouses violets. Ca soixante cornette ai
              exaltait. Pile des chez dut mais agit nid hein vlan. Ton arriverent indulgence vin vie
              electrique vieillards. Ans nid ici arrivons lupanars vin regiment persuada. Coups je de
              armes crise te ou. Attendu montent or malheur battant tu il ne. Ah un closes clairs ruches.
              Ne en touffe jambes gaiete courbe veilla.
            </p>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <p
              class="p-3">Voici arbre ma coups oncle abord ou en heros. Neanmoins causaient la me
              ameliorer attardent escadrons la fusillade il. Masse ouvre avons il ai quels sa et. Cependant ma
              qu frontiere seulement. Que effrayant croissent assassins son. Levee mes uns creux laque quand.
              Visages xv epouser emmener souleve il.
            </p>
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <p
              class="p-3">Societes empilait attentif eut feerique aussitot les. Nous soir vous va sous
              eaux au. En un ouvriers le physique quarante. Octogone tacherai foi fumantes toi paraitre car.
              Hagarde as en couvert ai on malheur. Minutes donnent ennemis en livides la conduit il etoffes.
              Peu coin voit vin pois cher. Executeurs pressaient on entrainait construits oh defilaient il
              decharnees. Gardait faisait escorte fatigue heureux tu humains sa. Parlaient du printemps
              sinistres causaient effrayant un laidement.
            </p>
          </div>
        </div>
      </div>
      <div id="accordion">
        <div class="card">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
              </button>
            </h5>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
              </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingThree">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
              </button>
            </h5>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

解决方法

Your structure looks like this:

<div class="row">
  <div class="col-md-6">
    <!-- tab group -->
  </div>
  <div id="accordion">
    <!-- collapsible group -->
  </div>
</div>

If you add display: flex to the parent container, .row, the two immediate child divs will be aligned side-by-side.

enter image description here

相似信息