Question

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

＆＃13;

.background-wrap {
  position: absolute;
  width: auto;
  top: 0%;
  left: 30%;
  z-index: 100;
  padding: 5px;
  margin-top: 0px;
}
#hero-area {
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  position: relative;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  overflow: hidden;
}
#hero-area:before {
  content: '';
  z-index: 9;
  background: rgba(255, 255, 255, 0.54);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
}
.vid-text {
  font-size: 250%;
  color: #1c1c1c;
  font-weight: 300;
  text-transform: none;
  line-height: 1;
  letter-spacing: .5px;
}
.text-one {
  color: #00bfff;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
}
.btn-full {
  color: #1c1c1c;
  padding: 10px 30px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
  border: 1px solid #00bfff;
  background-color: #00bfff;
  letter-spacing: .5px;
  font-size: 16px;
}
.btn-full:hover,
.btn-full:active {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff
}

＆＃13;

<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">

          <h5 class="vid-text">
    <span class="text-one"></span>
    <div class="col-xs-6">
    <a class="btn-full" href="#">Discover</a>  
    </div>
    </h5>

        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 1

你应该用跨度来判断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>

Answer 2

使用此

<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>

和css

.background-wrap {
  position: absolute;
  width: auto;
  top: 0%;
  left: 30%;
  z-index: 100;
  padding: 5px;
  margin-top: 0px;
}
#hero-area {
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  position: relative;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  overflow: hidden;
}
#hero-area:before {
  content: '';
  z-index: 9;
  background: rgba(255, 255, 255, 0.54);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
}
.vid-text {
  font-size: 250%;
  color: #1c1c1c;
  font-weight: 300;
  text-transform: none;
  line-height: 1;
  letter-spacing: .5px;
}
.text-one {
  color: #00bfff;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
}
.btn-full {
  color: #1c1c1c;
  padding: 10px 30px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
  border: 1px solid #00bfff;
  background-color: #00bfff;
  letter-spacing: .5px;
  font-size: 16px;
}
.btn-full:hover,.btn-full:active {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff
}
#h5
{
    float:left;
}
h5
{
    margin:0px;
}
.col-xs-6
{
    float:right;
}
.block:after
{
        display: block;
    content: '.';
    clear: both;
    visibility: hidden;
    height: 0px;
}
a 
{
    color:#000;
    text-decoration:none;
}

Answer 3

默认情况下，Div元素为geometry.STContains(GEOMETRY::STPointFromText('POINT (40.3038 -80.3005)', 4326))。这意味着他们不喜欢被放在他们旁边的东西＆＃34;。制作这些display:block应该允许这样做。最后，你还需要强行在同一条线上。而不是包装内容，所以添加：

inline-block

到你的CSS应该允许这个。

＆＃13;

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

＆＃13;

.background-wrap {
  position: absolute;
  width: auto;
  top: 0%;
  left: 30%;
  z-index: 100;
  padding: 5px;
  margin-top: 0px;
}
#hero-area {
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  position: relative;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  overflow: hidden;
}
#hero-area:before {
  content: '';
  z-index: 9;
  background: rgba(255, 255, 255, 0.54);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
}
.vid-text {
  font-size: 250%;
  color: #1c1c1c;
  font-weight: 300;
  text-transform: none;
  line-height: 1;
  letter-spacing: .5px;
}
.text-one {
  color: #00bfff;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
}
.btn-full {
  color: #1c1c1c;
  padding: 10px 30px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
  border: 1px solid #00bfff;
  background-color: #00bfff;
  letter-spacing: .5px;
  font-size: 16px;
}
.btn-full:hover,
.btn-full:active {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff
}
.row,
.col-xs-6 {
  display: inline-block;
  white-space: nowrap;
}

＆＃13;

Answer 4

我改变了这个：测试测试发现

将此添加到按钮btn-mat display：inline-block;

<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>

CSS

.btn-mat {
display: inline-block;
color: #1c1c1c;
padding: 20px 30px;
font-weight: 500;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
border: 1px solid #00bfff;
background-color: #00bfff;
letter-spacing: .5px;
font-size: 18px;  
margin-left: 15px;}


#hero-area {
position: absolute;
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
overflow: hidden;}

#hero-area:before {
content: '';
z-index: 9;
background: rgba(255, 255, 255, 0.54);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
height: 100vh;}


.vid-text {
font-size: 250%;
color: #1c1c1c;
font-weight: 300;
text-transform: none;
line-height: 1;
letter-spacing: .5px;}

text-one {
color: #00bfff;
font-size: 100%;
font-weight: 500;
line-height: 1;
letter-spacing: .5px;}

按钮需要在文本旁边

4 个答案: