【问题标题】:Horizontal lines behind buttons HTML/CSS按钮后面的水平线 HTML/CSS
【发布时间】:2019-03-21 13:18:15
【问题描述】:

我正在重新制作学校的学生 Intranet 以进行评估,但我遇到了按钮问题。正如您在图片中看到的,在按钮链接之间的间隙中可以看到一条水平线。

image

发生这种情况有什么原因吗?如果有帮助,我已经附上了网站按钮部分的 CSS 和 HTML 代码。

CSS:

.button {
    background-color:rgba(255, 255, 255, 0.5);
    border:none;
    width:auto;
    height:auto;
    border-radius:3px;
    color:#ffffff;
    font-size:16px;
    cursor:pointer;
    padding:15px;
    z-index:3;
}

.button:hover {
    color:#000000;
    transition:.2s;
    background-color:rgba(255, 255, 255, 0.8);
    padding-left:18px;
    padding-right:18px;
}

.button:active {
    color:#000000;
}

.button:focus {
    outline-color:gold;
}

HTML:

<div class="links">

    <h2>Links</h2>

        <a href="http://jhclibrary.weebly.com/" alt="JHC Library Website">
            <button class="button">
                Library Website
            </button>
        </a>

        <a href="http://jhclibrary.weebly.com/research.html" alt="Research">
            <button class="button">
                Research
            </button>
        </a>

        <a href="http://jameshargestcollege.wheelers.co/" alt="eBooks">
            <button class="button">
                eBooks
            </button>
        </a>

        <a href="10.0.0.7" alt="Library Catalogue">
            <button class="button">
                Library Catalogue
            </button>
        </a>

        <br><br>

        <a href="http://studentintranet/Documents/SubjectBooklets/ElLink.html" alt="Subject Booklets">
            <button class="button">
                Subject Booklets
            </button>
        </a>

        <a href="http://studentintranet/Documents/Options/ElLink.html" alt="Option Books">
            <button class="button">
                Option Books
            </button>
        </a>



    </div>

感谢任何帮助。谢谢!

【问题讨论】:

    标签: html css button hyperlink


    【解决方案1】:

    该行是按钮代码中&lt;a&gt; 标记的延续。将他们的 display 属性从 inline(默认)更改为 inline-block 应该可以解决问题。

    .links a {
      display: inline-block;
    }
    

    【讨论】:

    • 谢谢!这帮助很大!
    【解决方案2】:

    &lt;a&gt;标签移动到&lt;button&gt;标签内

        <div class="links">
    
        <h2>Links</h2>
    
        <button class="button">
            <a href="http://jhclibrary.weebly.com/" alt="JHC Library Website">
            Library Website
            </a>
        </button>
    
        <button class="button">
            <a href="http://jhclibrary.weebly.com/research.html" alt="Research">                    Research
            </a>
        </button>
    
        <button class="button">
            <a href="http://jameshargestcollege.wheelers.co/" alt="eBooks">
                    eBooks
            </a>
        </button>
    
        <button class="button">
            <a href="10.0.0.7" alt="Library Catalogue">
                    Library Catalogue
                    </a>
        </button>
    
        <br>
        <br>
    
        <button class="button"> <a href="http://studentintranet/Documents/SubjectBooklets/ElLink.html" alt="Subject Booklets">
    
                    Subject Booklets
    
            </a>
        </button>
    
        <button class="button">
            <a href="http://studentintranet/Documents/Options/ElLink.html" alt="Option Books">Option Books
    
            </a>
        </button>
    
    </div>
    

    JSFiddle

    【讨论】:

    • 我发现这很有帮助,但最终没有使用此解决方案,因为我发现它需要通过 CSS 对按钮进行一些额外的修改,因为它使文本颜色为蓝色并带有下划线。无论如何都非常感谢!
    猜你喜欢
    • 2016-02-20
    • 2023-02-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多