Question

我尝试制作它，以便在调整窗口大小时按钮随文本移动。我无法弄清楚为什么它不会起作用，即使它具有与其他id /类相同的属性。

＆＃13;

.relative{ 
  position:relative; 
  width:100%;
}
.absolute-text {
  color: white;
  position:absolute; 
  bottom:0;  
  top: 115px;
  width:100%; 
  text-align:center;
  font-family: 'Raleway', sans-serif;
}	
#fontStyle {
  font-weight: 700;
  font-size: 48px;
}
#fontStyle2 {
  font-size: 25px;
  text-decoration: none;
  font-weight: 500;
  top: 210px;
}
#button {
  width: 200px;
  height: 46px;
  line-height: 46px;
  padding: 0px 24px;
  display: inline-block;
  background-color: #1a75ff;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  -webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
  box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
  -webkit-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  top: 335px;
  left: 825px;
  text-align: center;
 }

＆＃13;

<header>
  <div class="relative">
    <img id="headerimage" src="http://i.imgur.com/iiE3pbP.jpg" />
    <p class="absolute-text" id="fontStyle">Reliable Web Hosting</p>
    <p class="absolute-text" id="fontStyle2" href="contact.html">We offer quality and reliable web hosting at <br> low prices that you'll not want to miss.</p>
    <a class="absolute-text" id="button" href="">Order Web Hosting</a>
  </div>
</header>

＆＃13;

Answer 1

您可以使用％表示响应

<div class="relative">
    <img id="headerimage" src="http://i.imgur.com/iiE3pbP.jpg" width="100%" />
    <p class="absolute-text" id="fontStyle">Reliable Web Hosting</p>
    <p class="absolute-text" id="fontStyle2" href="contact.html">We offer quality and reliable web hosting at <br> low prices that you'll not want to miss.</p>
    <p class="button_center"><a class="absolute-text" id="button" href="">Order Web Hosting</a></p>
</div>

  <style>   
    .relative{ 
    position:relative; 
    width:100%;
}

.absolute-text {
    color: white;
    position:absolute; 
    bottom:0;  
    top: 4%;
    width:100%;
    text-align:center;
    font-family: 'Raleway', sans-serif;
}   

#fontStyle {
    font-weight: 700;
    font-size: 48px;
}

#fontStyle2 {
    font-size: 25px;
    text-decoration: none;
    font-weight: 500;
    top: 30%;
}

.button_center{
text-align:center;  
}

#button {
    width: 200px;
    margin-left: -130px;
    height: 46px;
    line-height: 46px;
    padding: 0px 24px;
    display: inline-block;
    background-color: #1a75ff;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
    box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    top: 60%;
    text-align: center;
   }

  </style>

最佳变体 - 您可以将图片放在<div style="background:url() >中，而不是使用＆＃39;绝对＆＃39;

===================尝试

<p class="button_center"><a class="absolute-text" id="button" href="">Order Web Hosting</a></p>

.button_center{
text-align:center;  
position: absolute; 
left: 50%;
    top: 60%;
}

#button {
    width: 200px;
    height: 46px;
    line-height: 46px;
    padding: 0px 24px;
    display: inline-block;
    background-color: #1a75ff;
    color: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    -webkit-box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
    box-shadow: inset 0px -2px rgba(0, 0, 0, 0.22);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    left:40%;
    text-align: center;

  position: relative; 
  left: -50%;
   }

按钮不会在div

1 个答案: