Html 按钮需要放在文本旁边

我似乎无法将按钮置于文本右侧。如何使按钮与右侧的文本对齐。我正在使用HTML5、CSS3和bootstrap。我已经发布了它看起来像什么的图片，我正试图让它看起来像什么

.background wrap{
位置：绝对位置；
宽度：自动；
最高：0%；
左：30%；
z指数：100；
填充物：5px；
边际上限：0px；
}
#英雄区{
背景尺寸：封面；
背景附件：滚动条；
颜色：#fff；
位置：相对位置；
背景位置：中心；
溢出：隐藏；
高度：100vh；
溢出：隐藏；
}
#英雄区：以前{
内容：''；
z指数：9；
背景：rgba（255,255,255,0.54）；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
溢出：隐藏；
高度：100vh；
}
.vid text{
字体大小：250%；
颜色：#1c1c；
字体大小：300；
文本转换：无；
线高：1；
字母间距：.5px；
}
.文本一{
颜色：#00bff；
字体大小：100%；
字号：500；
线高：1；
字母间距：.5px；
}
.btn已满{
颜色：#1c1c；
填充：10px 30px；
字号：500；
文字装饰：无；
边界半径：200px；
过渡：背景色0.2s，边框0.2s，颜色0.2s；
边框：1px实心#00bff；
背景色：#00bff；
字母间距：.5px；
字体大小：16px；
}
.btn已满：悬停，
.btn已满：活动{
边框：1px实心#00bff；
背景色：#fff；
颜色：#00bff
}

---

你应该把div换成一个span

<h5 class="vid-text">The Matrix 
   <span class="text-one">Puts You In Control</span>
   <span class="col-xs-6>
      <a class="btn-full" href="#">Discover</a>  
   </span>
</h5>

矩阵
让你掌控一切
你应该用一个大跨距来改变这个div

<h5 class="vid-text">The Matrix 
   <span class="text-one">Puts You In Control</span>
   <span class="col-xs-6>
      <a class="btn-full" href="#">Discover</a>  
   </span>
</h5>

矩阵
让你掌控一切
默认情况下，Div元素是
display:block
。这意味着他们“不喜欢把东西放在旁边”。使这些
内联块
应考虑到这一点。最后，您还需要“在同一行上强制”，而不是包装内容，因此添加：

.row, .col-xs-6 {
  display: inline-block;
  white-space: nowrap;
} 

你的CSS应该允许这一点


.background wrap{
位置：绝对位置；
宽度：自动；
最高：0%；
左：30%；
z指数：100；
填充物：5px；
边际上限：0px；
}
#英雄区{
背景尺寸：封面；
背景附件：滚动条；
颜色：#fff；
位置：相对位置；
背景位置：中心；
溢出：隐藏；
高度：100vh；
溢出：隐藏；
}
#英雄区：以前{
内容：''；
z指数：9；
背景：rgba（255,255,255,0.54）；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
溢出：隐藏；
高度：100vh；
}
.vid text{
字体大小：250%；
颜色：#1c1c；
字体大小：300；
文本转换：无；
线高：1；
字母间距：.5px；
}
.文本一{
颜色：#00bff；
字体大小：100%；
字号：500；
线高：1；
字母间距：.5px；
}
.btn已满{
颜色：#1c1c；
填充：10px 30px；
字号：500；
文字装饰：无；
边界半径：200px；
过渡：背景色0.2s，边框0.2s，颜色0.2s；
边框：1px实心#00bff；
背景色：#00bff；
字母间距：.5px；
字体大小：16px；
}
.btn已满：悬停，
.btn已满：活动{
边框：1px实心#00bff；
背景色：#fff；
颜色：#00bff
}
一行
.col-xs-6{
显示：内联块；
空白：nowrap；
}

矩阵
让你掌控一切
默认情况下，Div元素是
显示：块。这意味着他们“不喜欢把东西放在旁边”。使这些
内联块
应考虑到这一点。最后，您还需要“在同一行上强制”，而不是包装内容，因此添加：

.row, .col-xs-6 {
  display: inline-block;
  white-space: nowrap;
} 

你的CSS应该允许这一点


.background wrap{
位置：绝对位置；
宽度：自动；
最高：0%；
左：30%；
z指数：100；
填充物：5px；
边际上限：0px；
}
#英雄区{
背景尺寸：封面；
背景附件：滚动条；
颜色：#fff；
位置：相对位置；
背景位置：中心；
溢出：隐藏；
高度：100vh；
溢出：隐藏；
}
#英雄区：以前{
内容：''；
z指数：9；
背景：rgba（255,255,255,0.54）；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
溢出：隐藏；
高度：100vh；
}
.vid text{
字体大小：250%；
颜色：#1c1c；
字体大小：300；
文本转换：无；
线高：1；
字母间距：.5px；
}
.文本一{
颜色：#00bff；
字体大小：100%；
字号：500；
线高：1；
字母间距：.5px；
}
.btn已满{
颜色：#1c1c；
填充：10px 30px；
字号：500；
文字装饰：无；
边界半径：200px；
过渡：背景色0.2s，边框0.2s，颜色0.2s；
边框：1px实心#00bff；
背景色：#00bff；
字母间距：.5px；
字体大小：16px；
}
.btn已满：悬停，
.btn已满：活动{
边框：1px实心#00bff；
背景色：#fff；
颜色：#00bff
}
一行
.col-xs-6{
显示：内联块；
空白：nowrap；
}

矩阵
让你掌控一切
使用此

<section id="hero-area">
  <video id="bgvid-m" autoplay loop>
    <source src="video/m%20Video%20header.oggtheora.ogv" />
    <source src="video/m%20Video%20header.mp4.mp4" />
  </video>

  <div class="background-wrap">
    <div class="row">
      <div class="col-md-12">
        <div class="block wow fadeInUp" data-wow-delay=".3s">
        <div id="h5">
          <h5 class="vid-text">The Matrix 
            <span class="text-one">Puts You In Control</span>
            </h5>
        </div>
        <div class="col-xs-6 btn-full">
           <a  href="#">Discover</a>  
       </div>
        </div>
      </div>
    </div>
  </div>
</section>

用这个

<section id="hero-area">
  <video id="bgvid-m" autoplay loop>
    <source src="video/m%20Video%20header.oggtheora.ogv" />
    <source src="video/m%20Video%20header.mp4.mp4" />
  </video>

  <div class="background-wrap">
    <div class="row">
      <div class="col-md-12">
        <div class="block wow fadeInUp" data-wow-delay=".3s">
        <div id="h5">
          <h5 class="vid-text">The Matrix 
            <span class="text-one">Puts You In Control</span>
            </h5>
        </div>
        <div class="col-xs-6 btn-full">
           <a  href="#">Discover</a>  
       </div>
        </div>
      </div>
    </div>
  </div>
</section>

我改变了这一点：
试验
试验
发现


将此添加到按钮btn mat
显示：内联块

<section id="hero-area" >

<video id="bgvid-m" autoplay loop>
<source src="video/Matrix%20Video%20header.oggtheora.ogv"/>

<source src="video/Matrix%20Video%20header.mp4.mp4"/>


</video>

<div class="background-wrap">
<div class="row">
<div class="col-md-12">
<div class="block wow fadeInUp" data-wow-delay=".3s">

<span class="vid-text">TEST
<span class="text-one">TEST</span>
<a class="btn-mat" href="#">Discover</a>  
</span>
</div>
</div>
</div>
</div>
</section>

我改变了这一点：
试验
试验
发现


将此添加到按钮btn mat
显示：内联块

<section id="hero-area" >

<video id="bgvid-m" autoplay loop>
<source src="video/Matrix%20Video%20header.oggtheora.ogv"/>

<source src="video/Matrix%20Video%20header.mp4.mp4"/>


</video>

<div class="background-wrap">
<div class="row">
<div class="col-md-12">
<div class="block wow fadeInUp" data-wow-delay=".3s">

<span class="vid-text">TEST
<span class="text-one">TEST</span>
<a class="btn-mat" href="#">Discover</a>  
</span>
</div>
</div>
</div>
</div>
</section>

当我这样做的时候，整个事情都搞砸了——可能是因为我在其他地方使用了col类和row。。还有其他方法吗？@Classics07不需要使用相当广泛的类选择器，您可以将您希望为CSS提供的两个id分配给唯一的id（
id=row1
，
id=“col-xs-61
”），然后通过CSS中的
#row1，#col-xs-61
将它们作为目标。当我这样做时，整个事情都会搞砸——可能是因为