Question

我正在尝试将“tweet”按钮放在我的“生成报价”按钮旁边，但由于某种原因，css不起作用。我尝试使用top: 50%，margin-top: 50%，将其放在“quote”div下的另一个div中，用＃作为目标，但它仍然位于左上角。可能是什么原因？

https://codepen.io/s4ek1389/pen/zZGNWw?editors=1100

HTML

<head>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>

<div class="main">  
  <div id="quote">
    <h1>There is nothing either good or bad, but thinking makes it so.</h1>
   <h4>William Shakespeare</h4>
    </div>

  <div class="containter">
<div class="row">
  <button type="button", class="btn  btn-primary", id="gen"> Generate Quote!
  </button>

  <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false" id="tw">Tweet</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  </div>
</div>

CSS

.main {
  background-image:url("http://wallpapercave.com/wp/mVcZwOP.jpg");
background-size:cover;
min-height: 640px;
margin: 0 auto;
position:relative;
width:100%;
max-width:1680px;

}

#quote {
 text-align:center;
 width:70%;

}
h1 {

  position: absolute;
  top: 30%;
  font-size:5vw;
  background-color:rgba(173, 29, 125, 0.5);
  color:white;
  font-family: "Comfortaa", cursive;
  text-align:center;
  display:block;
}

h4 {
  top:60%;
  font-size:3vw;
  background-color:rgba(173, 29, 125, 0.5);
  color:white;
  font-family: "Comfortaa", cursive;
  position:absolute;

  display:inline-block;

}

#gen {
  top:80%;
  position: absolute;
  left:42%;
  display:inline;
}

#tw {
 top:50%;
 position:absolute;
 margin-top:50%;

}

Answer 1

您可以将所有这些文本/按钮内容放在一个绝对定位的元素中，然后将该元素的内容相对于彼此相对定位，而不是绝对定位每个单独的元素。它会让事情变得更容易。

你的推特按钮的主要问题是，你放在HTML中的代码只是一个占位符，替换为推特按钮的iframe，所以你的样式是错误的元素。你不想设置#tw样式，你想要设置#twitter-widget-0样式，这是twitter按钮创建的呈现iframe的ID。但是如果你把这些代码放在我上面提到的元素中，你就不需要设置那个按钮的样式。

.main {
  background-image: url("http://wallpapercave.com/wp/mVcZwOP.jpg");
  background-size: cover;
  min-height: 640px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  max-width: 1680px;
}

#quote {
  text-align: center;
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}

h1 {
  font-size: 5vw;
  background-color: rgba(173, 29, 125, 0.5);
  color: white;
  font-family: "Comfortaa", cursive;
}

h4 {
  font-size: 3vw;
  background-color: rgba(173, 29, 125, 0.5);
  color: white;
  font-family: "Comfortaa", cursive;
  display: inline-block;
}

#gen {
  margin-right: 1em;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<head>
  <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
</head>

<div class="main">
  <div id="quote">
    <h1>There is nothing either good or bad, but thinking makes it so.</h1>
    <h4>William Shakespeare</h4>
    <div class="buttons">
      <button type="button" class="btn  btn-primary" id="gen"> Generate Quote!</button>
      <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-show-count="false" id="tw">Tweet</a>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

使用CSS和Bootstrap定位按钮

1 个答案: