Question

我正在尝试使内联ul成为带圆边的连接条。

我已经到了边缘。我尝试将边距设为负px值，但它重叠太多，当我没有为ul的第一个和最后一个制作单独的选择器时，它只是围绕所有这些选择器形成一个正方形而没有任何圆边。

当我滚动它时，我还需要每个单独的链接框变成黑色和白色文本。

另外，我需要虚线框位于页面的中心。内部的标题和文本需要与左对齐。我想知道如何在不编辑html代码的情况下执行此操作。

当我尝试对齐div标签位置时：center;它不起作用。

HTML

    <div id="main_lnb">
        <ul>
            <li><a href="#" id="first">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#" id="last">Node.js</a></li>
        </ul>
    </div>

CSS

*{
    text-align: center;
}
li{
    display: inline;
    width: 1000px;
    padding: 10px;
    margin: -5px; 
}
a:link{
    text-decoration: none;
}
#first{
    display: inline;
    width: 1000px;
    padding: 10px;
    margin: 0px; 
    border: 1px solid black;
    border-radius: 10px 0px 0px 10px !important;
}
#first:hover{
    background-color:black;
    color: white;
}
#last{
    display: inline;
    width: 1000px;
    padding: 10px;
    margin: 0px; 
    border: 1px solid black;
    border-radius: 0px 10px 10px 0px !important;
}
#last:hover{
    background-color:black;
    color: white;
}

Answer 1

您的CSS出现了一些错误。首先，您应在display: inline-block和display: inline元素上使用<li>代替<a>。接下来，使用display: inline-block在两个white-space元素之间添加一点inline-block，因此您需要稍微修改HTML结构;确切地说，<ul>列表的结构如下：

<ul>
     <li>
     <a href="#" id="first">HTML5</a></li><li>
     <a href="#">CSS3</a></li><li><a href="#">JavaScript</a></li><li>
     <a href="#">jQuery</a></li><li>
     <a href="#" id="last">Node.js</a></li>
</ul>

您可以阅读有关此here的更多信息。

最后，要将虚线框居中，您可以为main_article div定义固定宽度，然后使用margin: 0px auto将其居中。

这是一个演示：

* {
    text-align: center;
}
#title {
    font-family:"Henny Penny";
}
.main_article p {
    text-align: left;
}
#main_lnb ul {
    list-style: none;
    padding: 0px;
}
#main_lnb ul > li {
    display: inline-block;
}
#main_lnb ul > li a {
    display: inline-block;
    border: 1px solid black;
    text-decoration: none;
    padding: 10px;
}
#main_lnb ul > li:first-child a {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
#main_lnb ul > li:last-child a {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
#main_lnb ul > li a:hover {
    background-color: black;
    color: white;
}
.main_article {
    box-shadow: 2px 2px 2px 2px grey;
    width: 300px;
    border: 1px dashed black;
    margin: 5px auto;
    padding: 10px;
    text-align: left;
}
.main_article h1 {
    text-align: left;
}

<div id="main_header">
    <div id="title">
        <h1>Rint Development</h1>
        <h2>HTML5 + CSS3 Basic</h2>
    </div>
    <div id="main_lnb">
        <ul>
            <li>
            <a href="#" id="first">HTML5</a></li><li>
            <a href="#">CSS3</a></li><li><a href="#">JavaScript</a></li><li>
            <a href="#">jQuery</a></li><li>
            <a href="#" id="last">Node.js</a></li>
        </ul>
    </div>
</div> 
<div id="content">
    <div class="main_article">
        <h1>Main Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
    </div>
    <div class="main_article">
        <h1>Main Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
    </div>
    <div class="main_article">
        <h1>Main Article</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in magna libero. Sed     nec pharetra nunc. Proin eget magna id ipsum eleifend cursus sit amet nec lectus. Nunc quis lacus magna. Aliquam blandit, sapien ut viverra fermentum, elit tortor ornare nisi, in luctus sem massa pulvinar turpis. Cras tincidunt dictum urna ut ultricies. Nullam diam nibh, pellentesque non laoreet ut, bibendum nec mauris. Maecenas pulvinar porttitor laoreet. Vivamus bibendum purus nisl, eget aliquam lectus. Maecenas justo libero, euismod sit amet suscipit eu, vulputate eget neque. Aliquam quam est, blandit nec iaculis non, suscipit vel nunc. Proin et odio aliquam erat pharetra accumsan et quis neque. Vivamus interdum accumsan leo eu adipiscing. Integer accumsan elit non turpis faucibus porttitor. Aliquam scelerisque nisi et turpis pretium at ultricies turpis pharetra.</p>
    </div>
</div>
<div id="main_footer">
    <h3>HTML5 + CSS3 Basic</h3>
</div>

<强> jsFiddle Demo

CSS3内联<a> ul list connected</a>

1 个答案: