Question

我是编码的新手并且已经使用了这个资源一段时间，但这是我的第一个问题！

以下是相关网页的链接：http://www.andrewkennedy.ie/

我已经包含了明亮的背景，以便于查看不同元素的开始和结束位置。

我想知道如何摆脱元素之间的空白区域（边距和填充设置为0）以及如何获取蓝色部分的内容，并将它们放到绿色部分，影响我名字的中心位置。换句话说，我完全按照我的名字 - 在中心 - 然后使用电子邮件＆＃39;和＆＃39; LinkedIn＆＃39;在窗口的最右侧显示与其内联。

这是我的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>

Answer 2

与其他用户说的一样，您已将自己的名字放在h1标签内。这些标签已经在它们内部带有边距，它们将被用在有很多空间的页面上，并且可以用于诸如文章标题之类的东西。对于您的情况，您可以删除h1标签，只需用段落标签替换它们（根据需要设置样式），或者您可以更改h1的边距。在CSS中，您可以更改h1标签上的边距，以根据需要自定义网站。

这看起来像这样

.h1 {
margin-top:0px;
margin-bottom:0px;
}

Answer 3

您的代码肯定需要工作。这是我的优化和评论的小提琴：http://jsfiddle.net/QJcsB/。

代码中仍然存在冗余，我们会让您解决这些问题。

更新了HTML：

<div id="header">
    <ul id = "contact_menu">
        <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>
    <h1 id = "title"><span>Andrew</span> <span>Kennedy</span></h1>
    <ul id = "nav">
        <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 id="main">
    <img src="http://placehold.it/500x300" />
</div>
<div id="footer"></div>

而且，CSS：

/* It is a good practice to use one of the reset css files.  
For more info see http://www.cssreset.com/ */

* {
    margin: 0;
    padding: 0;
}

/* Color code #fff is a valid abbreviation of #ffffff */

body {
    background-color: #fff;
}

/* There is really no need to wrap h1 tag in a div tag.  The h1, 
by default is a block element and you can just assign an id to it and 
access it directly. */

#title {
    background-color: #0f0;
    color: #000;
    /* font-weight, font-size, line-height, and font-family were 
    combined into font declaration */
    font: bold 45px/1.5 'Avant Garde', Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-align: center;
    letter-spacing: 5px;

    /* width of 100% is not necessary, because h1 is a block and 
    spans the entire width of its parent by default.  The margin 
    and padding of 0 were deleted also, because these are specified 
    in a mini-reset up top. */
}

/* Your first and last names were surrounded by span elements.  
To invoke ::first-letter pseudo-element on these, the spans are displayed 
as inline-block */

#title > span {
    display: inline-block;
}

#title > span::first-letter {
    color: #900;
}

/* Same as with h1, there is no need to wrap an unordered list in a div.  
The ul, by default, is also displayed as a block */

#contact_menu {
    background-color: #00f;
    list-style-type: none;
    text-align: right;
}

/* the list items are displayed as inline-blocks, which makes them stack 
horizontally while still allowing us to change their dimensions.  Unlike 
floats, inline-blocks will not break the structure and do not require 
clearing */

#contact_menu > li {
    display: inline-block;
}

#contact_menu > li > a {
    /* Anchors (a), by default, are inlines.  Changing their display 
    to block allows changing their dimensions. Instead of setting width 
    explicitly, the line-height and padding are used.  Anchors do not 
    take a line to themselves, because they are wrapped in inline-block 
    list items */    
    display: block;
    font: normal 30px/1.5 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-decoration: none;
    padding: 0 5px;

    /* text-align was deleted because it was specified on the level of 
    the ul and because li are inline-blocks, they wrap around the content 
    of their children, so doing text alignment within these is moot.  width 
    was deleted as well because it is implicitly set through padding*/
}

/* the entire chain in the selectors should be typed out.  :hover pseudo-class 
is removed, because unless you are changing styles due to hovering, they'll 
stay the unchanged */

#contact_menu > li > a:link, 
#contact_menu > li > a:visited, 
#contact_menu > li > a:active {
    color: #777;
}

#nav {
    background-color: #f00;
    list-style-type: none;
    text-align: center;
}

#nav > li {
    display: inline-block;
}

#nav > li > a {
    display: block;
    font: normal 30px/1.2 "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    text-decoration: none;
    padding: 0 10px;
}
#nav > li > a:link,
#nav > li > a:active,
#nav > li > a:visited {
    color: #777;
}

/* I also removed the div surrounding your image */

HTML / CSS定位和间距

3 个答案: