个人中心
gpt4 book ai didi

css - h1 文字重叠边框

转载 作者：太空宇宙 更新时间：2023-11-04 03:32:27 25 4
gpt4 key购买 nike

我尽一切努力将 h1 文本放入其框内，现在我无可救药地把它写在这里了。我是 CSS 的新手，请尝试为我制作一份基本的简历。当您单击链接时，您会发现问题所在。

编辑:我的问题是错误的，将 h1 标签的高度设置为 65px 可以解决问题。我想知道有什么方法可以用 h1 标签框包装所有文本。

http://jsfiddle.net/uLmkw0oj

HTML 代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <link rel="stylesheet" href="stylesheets/main.css">
    <link rel="stylesheet" href="stylesheets/meyerreset.css">
    <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800"
          rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <title>ShayHoweTutorials</title>

</head>
<body>
<nav class="navbar">
    <ul class="menu">
        <li><a class="btn btn-alt" href="aboutme.html">About Me</a></li>
        <li><a class="btn btn-alt" href="myworks.html">My Works</a></li>
        <li><a class="btn btn-alt" href="resume.html">Resume</a></li>
        <li><a class="logo" href="#top">LOGO</a></li>
        <li><a class="btn btn-alt" href="services.html">Services</a></li>
        <li><a class="btn btn-alt" href="#skills">Skills</a></li>
        <li><a class="btn btn-alt" href="skills.html">Contact Me</a></li>
    </ul>
</nav>
<div class="container clearfix">
<section id="content">
    <article class="article" id="top-content">
        <h1>Ali Arda Orhan</h1>
        <h2>Analyst Developer @Amadeus Turkey</h2>
        <a href="mailto:ali.orhan@amadeus.com">ali.orhan@amadeus.com</a>
        <div id="social-buttons">
            <img src="images/Facebook-icon.png">
            <img src="images/GitHub-icon.png">
            <img src="images/LinkedIn-icon.png">
            <img src="images/Twitter-icon.png">
            <img src="images/Skype-icon.png">
        </div>
    </article>
    <article class="article">
        <h3>About Me</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>My Works</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Resume</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Services</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Skills</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>


    </article>
    <article class="article">
        <h3>Contact Me</h3>

        <p>Askify Projesine başlarken planladığım aplikasyon anket, quiz, zeka-testleri gibi dışarıdan bilgi toplamaya
            yönelik tüm aktiviteleri tek bir çatı altında, gelişmiş istatistiklerle şirketlerin ve akademisyenlerin
            hizmetine
            sunmaktır.</p>
    </article>
</section>
<footer id="main-footer">
    <small> ilk web sitem <a href="#top">Go to top</a></small>
</footer>
</div>
</body>
</html>

和 CSS

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.container {
    font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px auto;
    padding-left: 30px;
    padding-right: 30px;
    width: 960px;
    height: auto;
    color: #333;
}

.navbar {
    background-color: #5690e6;
    position: fixed;
    width: 100%;
    z-index: 0;
    opacity: 0.8;
    padding: 0;
}

.menu {
    list-style-type: none;
    margin: 0px;
    padding: 0;
    text-align: center;
}

.menu li {
    display: inline;
}

#top-content {
    padding-top: 140px;
    text-align: center;
    display: block;

}

#top-content h1{
    font-size: 65px;
    font-weight: bold;
    margin-bottom: 6px;
    display: block;
    border-bottom: 1px solid #000000;
    padding-top: 140px;
}


#top-content h2{
    display: block;
    font-size: 22px;
}

#social-buttons img{
    width: 5%;
    height: auto;
}

.article {
    padding: 30px 30px;
    clear: both;
}

.btn {
    display: inline-block;
    margin: 0;
}

.btn-alt {
    padding: 10px 30px;
}

.btn-alt:hover {
    background-color: #555555;
}

最佳答案

添加line-height: 65px;至 <h1>标签。

关于css - h1 文字重叠边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26128565/

25 4 0
文章推荐： html - 如何使元素匹配动态页面的高度
文章推荐： python - 在 Windows 上安装 Anaconda
文章推荐： Python请求代理连接超时
文章推荐： javascript - 使用 CSS 和 JS 使 Body 的宽度为 Screen 的两倍
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com