刪除位置：絕對神奇地使文本下劃線

所以我很新的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

刪除位置：絕對神奇地使文本下劃線

回答

相關問題