html - 删除位置 :absolute magically makes text underlined

标签 html css

所以我是 HTML/CSS 的新手，我正在尝试为自己构建一个非常基本的主页，我可以将其放在名片上。在我的页面顶部，我有一个按钮列表(顺便说一句，不是 Bootstrap )，它们现在是绝对定位的。 问题是，在我努力让我的网站更灵活地适应不同的屏幕尺寸时，我不希望它们变成那样。 但是，从其属性中删除 position: absolute (在我的测试中，我从 .button1 中删除了它) 导致下划线神奇地出现。

这是删除 position:absolute 时发生的情况的 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，但它 super 坏了。不明白为什么，请指教http://jsfiddle.net/b8z9y9rr/

最佳答案

所有浏览器的默认 anchor 样式都有text-decoration: underline。您所有的链接都带有下划线，您的问题应该改为:为什么我的两个链接没有下划线？

答案是:CSS text-decoration默认情况下不继承，您在两个 anchor 内嵌套了一个具有绝对位置的 div。 Absolute positioning接受我们的内容，因此它没有下划线。

解决方案是:将您的样式直接应用于 anchor ，而不是子元素。

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

关于html - 删除位置 :absolute magically makes text underlined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33484954/

上一篇：html - 如何在容器中间放置背景图像？

下一篇：html - 导航栏上的 Bootstrap 断点

相关文章：

html - 无法在 bootstrap 模式中将输入集中在 qtip 中

css - 如何使我的标题在移动设备上看起来更好

jquery - 如何在屏幕上显示页脚时隐藏固定 DIV？

html - 下拉菜单样式问题

css - 有没有一种简单的方法可以使 div 垂直居中并让它们也内联显示？

html - 这个语法有什么错误？

javascript - 如何使用 jQuery 在 Select 事件中禁用不同的输入

javascript - 显示和隐藏 Javascript(显示 :none) issue

javascript - 使用带有闹钟声音的JavaScript创建倒数计时器

html - 嵌套表不占用父 td 的 100% 高度

©2024 IT工具网  联系我们