HTML/CSS 定位和间距

Question

我是编码新手，使用此资源已有一段时间，但这是我的第一个问题!

这是指向相关网页的链接:http://www.andrewkennedy.ie/

我添加了明亮的背景只是为了便于查看不同元素的开始和结束位置。

我想知道如何去除元素之间的空白(边距和填充设置为 0)以及如何将蓝色部分的内容放到绿色部分，而不用影响我名字的中心位置。换句话说，我希望我的名字完全原样 - 在中间 - 然后带有“电子邮件”和“LinkedIn”的垂直菜单与其内联显示在窗口的最右侧。

这是我的 html:

<div id="header">
    <div id="contact_menu">
        <ul>
            <li><a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a>
            </li>
            <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a>
            </li>
        </ul>
    </div>
    <div id="title">
         <h1><span>A</span>ndrew <span>K</span>ennedy</h1>

    </div>
    <div id="nav">
        <ul>
            <li><a href="http://www.andrewkennedy.ie/" target="_blank">Home</a>
            </li>
            <li><a href="http://www.google.ie/" target="_blank">Google</a>
            </li>
            <li><a href="http://www.yahoo.com/" target="_blank">Yahoo</a>
            </li>
            <li><a href="http://www.bing.com/" target="_blank">Bing</a>
            </li>
        </ul>
    </div>
</div>  

还有我的 CSS 的精简版(省略了不相关的部分):

/* Title CSS*/
 #title {
    background-color: #00ff00;
    color: #000000;
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 40px;
    text-align: center;
    letter-spacing: 5px;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* Contact Menu CSS */
 #contact_menu ul {
    text-align: right;
    list-style-type: none;
    margin: 50px 50px 0 0;
    padding: 0;
}
#contact_menu ul li a {
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    text-decoration: none;
    text-align: right;
    width: 100px;
    font-weight: 400;
}
/* Navigation Menu CSS */
 #nav ul {
    background-color: #ff0000;
    text-align: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#nav ul li {
    display: inline;
}
#nav ul li a {
    font-family:'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 30px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    width: 200px;
}

任何帮助将不胜感激。感谢抽空。

安德鲁

Answer 1

您将元素放置在 h1 标签中。 h1 具有浏览器强加的自然边距。无论如何，您都不应该将元素包装在 h1 标签中。将其更改为没有边距的 div，空白将消失。

包装联系信息的 ul 可以放在“Andrew Kennedy”的父包装器中(在您将其从 h1 更改之后)。将“position:absolute”添加到 ul，您可以使用“left”属性定位它。

这是对标题 div 的修改。内联 css 自然应该放在样式表中，这只是为了演示目的。

<div id="title">
    <div style="font-size: 50px;"><span>A</span>ndrew <span>K</span>ennedy</div>
    <ul style="position:absolute;font-size: 12px;right: 10px;margin-top: -40px;text-align: left;">
        <li><a href="mailto:andrew@andrewkennedy.ie" target="_top">Email</a></li>
        <li><a href="https://www.linkedin.com/pub/andrew-kennedy/42/a26/704" target="_blank">LinkedIn</a></li>
    </ul>
</div>