删除位置：绝对神奇地使文本下划线

所以我很新的HTML/CSS，我试图建立一个我可以放在名片上的一个漂亮的基本主页。在我的页面顶部，我有一个按钮列表（不是bootstrap顺便说一句），他们现在是绝对定位。问题在于，为了让我的网站在不同的屏幕尺寸下更加灵活，我不希望它们那样。但是，从他们的属性（在我的测试中，我将其从.button1中删除）删除了绝对位置：导致下划线奇迹般地出现。删除位置：绝对神奇地使文本下划线

这里是当我删除的位置会发生什么GIF：绝对： https://gyazo.com/03e95bf02e822b544a39518b1923a7db

我会在这里包括我的代码，但我多么可怕敢肯定，这是不笑。

任何帮助是很好的帮助！

HTML：

 <body> 
     <h1 id="samsmith">Sam Smith</h1> 

     <div id="buttonbox"> 
      <a href="https://www.smitty1ky.tumblr.com">  
       <h1 class="button1"> 
        <div class="button1con"> 
        Tumblr 
        </div> 
       </h1> 
      </a> 

      <a href="https://open.spotify.com/user/smitty1ky">  
       <h1 class="button2"> 
        <div class="button2con"> 
        spotify 
        </div> 
       </h1> 
      </a> 

      <a href="http://westwoodlitmag.com">  
       <h1 class="button3"> 
        <div class="button3con"> 
        WestWood 
        </div> 
       </h1> 
      </a> 
     </div> 
     <p id="welcome"> Welcome.</p> 
     <p id="student">Student at <a href="http://woodford.kyschools.us/">WCHS.</a></p> 
     <p id="inprogress">Coming Soon</p> 

     <h6 class="footer">&copy; Samuel T Smith 2015</h6> 
     <script type="text/javascript"> 
     </script> 
    </body>

CSS：

  body { 
      background-image: url("http://gdurl.com/5oH1"); 
     } 


     #samsmith { 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size: 100px; 
      margin:auto; 
      text-align:center; 
      right: 0; 
      left: 0; 
      padding-bottom: 5px; 
     } 


     .button1con { 
      background-image: url("http://gdurl.com/VjUJ"); 
      margin:auto; 
      right:0; 
      left:0; 
      height: 35px; 
      width:100px; 
      padding-top:5; 
     } 

     .button1 { 
      position: absolute; 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size:25; 
      padding-top:0; 
      margin:auto; 
      text-align:center; 
      height:40px; 
      width:100px; 
      right:0; 
      left:0; 
     } 

     .button1:hover .button1con {background-image: url("http://gdurl.com/IWM6") } 
     .button1:hover {color: rgb(0,0,0); } 

     .button2con { 

      background-image: url("http://gdurl.com/VjUJ"); 
      margin:auto; 
      right:0; 
      left:0; 
      height: 35px; 
      width:100px; 
      padding-top:5; 
     } 

     .button2 { 
      position:absolute; 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size:25; 
      padding-top:0; 
      margin:auto; 
      text-align:center; 
      height:40px; 
      width:100px; 
      right:250; 
      left:0; 
     } 

     .button2:hover .button2con {background-image: url("http://gdurl.com/IWM6") } 
     .button2:hover {color: rgb(0,0,0); } 

     .button3con { 

      background-image: url("http://gdurl.com/088x"); 
      margin:auto; 
      right:0; 
      left:0; 
      height: 35px; 
      width:150px; 
      padding-top:5; 
     } 

     .button3 { 
      position:absolute; 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size:25; 
      padding-top:0; 
      margin:auto; 
      text-align:center; 
      height:40px; 
      width:100px; 
      right:0; 
      left:250; 
     } 

     .button3:hover .button3con {background-image: url("http://gdurl.com/DZaI") } 
     .button3:hover {color: rgb(0,0,0); } 

     a:link  { 
      color: rgb(236,228,217); 
     } 
     a:visited { 
      color: rgb(236, 228, 217); 
     } 
     a:hover { 
      color: rgb(0,0,0); 
      background-color: rgb(236,228,217); 
      text-decoration: none; 
     } 
     a.buttons:link  { 
      color: rgb(236,228,217); 
      text-decoration:none; 
     } 
     a.buttons:visited { 
      color: rgb(236,228,217); 
      text-decoration:none; 
     } 
     a.buttons:hover  { 
      color: rgb(0,0,0); 
      text-decoration:none; 
     } 
     a.button1:link { 
      text-decoration:none; 
     } 

     p { 
      font-family:Megrim; 
      color: rgb(236,228,217) 
     } 
     p#welcome { 
      position: relative; 
      top:300; 
      font-size: 50px; 
      margin:auto; 
      text-align:center; 
     } 
     p#student { 
      position: relative; 
      top:300; 
      font-size: 30px; 
      margin:auto; 
      text-align:center; 
     } 

     #inprogress { 
      font-size: 75px; 
      position: relative; 
      margin:auto; 
      text-align:center; 
      letter-spacing: 30px; 
     } 

     .footer { 
      font-family: Megrim; 
      position: fixed; 
      font-size: 25px; 
      color: #282828; 
      bottom: -45; 
      right: 10; 
     } 

     @keyframes colors { 
       0% {color: white;} 
      50% {color: red;} 
      100% {color: white;} 
     } 

     #inprogress { 
      animation-name:colors; 
      animation-duration:5s; 
      animation-iteration-count:infinite; 
     } 

      @media only screen and (max-width: 1100px) { 


      #samsmith { 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size: 100px; 
      margin:auto; 
      text-align:center; 
      right: 0; 
      left: 0; 
      padding-bottom: 5px; 
     } 

     } 
      @media only screen and (max-width: 500px) { 


      #samsmith { 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size: 75px; 
      margin:auto; 
      text-align:center; 
      right: 0; 
      left: 0; 
      padding-bottom: 5px; 
     } 

     .button3con { 
      position:absolute; 
      background-image: url("http://gdurl.com/088x"); 
      margin:auto; 
      right:0; 
      left:0; 
      height: 35px; 
      width:150px; 
      padding-top:5; 
     } 

     .button3 { 
      position:relative; 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size:25; 
      padding-top:0; 
      margin:auto; 
      text-align:center; 
      height:40px; 
      width:100px; 
      right:0; 
      left:-20; 
      top:75px; 
     } 

     .button2con { 
      position:absolute; 
      background-image: url("http://gdurl.com/VjUJ"); 
      margin:auto; 
      right:0; 
      left:40; 
      height: 35px; 
      width:100px; 
      padding-top:5; 
     } 

     .button2 { 
      position:absolute; 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size:25; 
      padding-top:0; 
      margin:auto; 
      text-align:center; 
      height:40px; 
      width:100px; 
      right:250; 
      left:0; 
     } 

     .button1con { 
      position:absolute; 
      background-image: url("http://gdurl.com/VjUJ"); 
      margin:auto; 
      right:0; 
      left:80; 
      height: 35px; 
      width:100px; 
      padding-top:5; 
     } 

     .button1 { 
      position:absolute; 
      font-family:Megrim; 
      color: rgb(236,228,217); 
      font-size:25; 
      padding-top:0; 
      margin:auto; 
      text-align:center; 
      height:40px; 
      width:100px; 
      right:0; 
      left:0; 
     } 

     }

编辑1：这也是值得一提的是，我的ID = “buttonbox” 尚未在所有被赋予一个名称来实现一边，所以这可能不是问题。

编辑2：创建了一个jsfiddle，但它的超级破碎。不知道为什么，请告知http://jsfiddle.net/b8z9y9rr/

来源

2015-11-02 Smitty1ky

那是奇怪的。它可能与事实有关，我没有从我的HTML文档中分离出样式表呢？我也只是意识到，我没有包括我所有的CSS，所以即时编辑并将其扔在那里 – Smitty1ky

我无法重现与您包含的代码的问题。请扩展您的问题以包含足够的代码以重现问题。编辑帖子或将代码添加到jsfiddle.net并提供链接时，您可以使用代码段。 – wf4

现在做一个jsfiddle – Smitty1ky

所有浏览器的默认锚点样式有text-decoration: underline。你所有的链接都加下划线，你的问题应该改为：为什么我的两个链接不加下划线？

答案是：CSS text-decoration默认情况下不会继承，并且您嵌套了一个div，其中两个锚点位于绝对位置。 Absolute positioning需要我们的流量和因此它不是下划线。

解决方法是：将您的样式直接应用到锚点而不是子元素。

与HTML说到：

.buttonbox { 
 
    position: relative; 
 
    text-align: center; 
 
    height: 100px; 
 
} 
 
.buttonbox a { 
 
    display: inline-block; 
 
} 
 
.button1 { 
 
    text-align: center; 
 
} 
 
.button2 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50px; 
 
} 
 
.button3 { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50px; 
 
}

<p>Use this:</p> 
 
<div class="buttonbox"> 
 
    <a class="button1" href="https://www.smitty1ky.tumblr.com">Tumblr</a> 
 
    <a class="button2" href="https://open.spotify.com/user/smitty1ky">spotify</a> 
 
    <a class="button3" href="http://westwoodlitmag.com">WestWood</a> 
 
</div> 
 
<p>NOT this:</p> 
 
<div class="buttonbox"> 
 
    <a href="https://www.smitty1ky.tumblr.com"><div class="button1">Tumblr</div></a> 
 
    <a href="https://open.spotify.com/user/smitty1ky"><div class="button2">spotify</div></a> 
 
    <a href="http://westwoodlitmag.com"><div class="button3">WestWood</div></a> 
 
</div>

同样在Playground。

来源

2015-11-02 21:56:52 skobaljic

我想你解决了我所有的问题。只要我能得到它的工作标记解决方案 – Smitty1ky

没问题，所以不完全是我的问题的解决方案，但你确实使我（通过一些试验和磨难）来解决问题，所以我会将它标记为已回答。 – Smitty1ky

很高兴以任何方式提供帮助。 – skobaljic

删除位置：绝对神奇地使文本下划线

回答

相关问题