Question

我希望控制<ul><li> <a href=''>Register</li></ul>周围的框。我在该列表项周围制作了绿色背景，但我想控制边框的顶部和底部边框，使它们更接近文本 Register

说实话，左右两侧也相距太远，我不确定我是如何无意中修复它们的。直到现在才注意到变化。

* {
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}

.clear {
    clear: both;
}

body {
    background-color: #37acc5;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

#top {
    background-color: #ffffff;
}

header {
    float: left;
}

a {
    text-decoration: none;
    color: #262626;
}

li {
    list-style-type: none;

}

header h1 {
    color: #262626;
    padding-left: 15px;
    padding-top: 5px;
}

#nav-top {
    float: right;
    min-height: 50px;
}

#list1 li {
    float: left;
    padding: 5px;
    margin-left: 5px;
}

#id-top-nav-link {
    float: left;
}

#id-select select {
    float: right;
    margin-top: 17px;
}

#top-link div {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
    padding-right: 10px;
}

.nav .div-list .list > li {
    padding-left: 15px;
}

#list1 #register {
    background-color: #37acc5;
    border-radius: 10%;
}

#article {
    background-image: url('../img/blockchain.jpg');
    background-position: 0%;
    padding: 100px;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

#article div {
    margin-left: 0px;
}

#art-text {
    background-color: #37acc5;
}

article h1, h2 {
    text-align: center;
}

#footer1 {
    float: left;
}

#footer2 {
    float: right;
}

<body id="body">
<!-----------------------------------HEADER------------------------------------------->
<div id="top">
    <header id="header">
        <h1>Icon Share</h1>
    </header>
    <!-----------------------------------NAV---------------------------------------------->
    <nav id="nav-top" class="nav">
        <div id="top-link">
            <div class="div-list" id="id-top-nav-link">
                <ul class="list" id="list1">
                    <li id="register"><a href="register.html">Register</a></li>
                    <li><a href="login.html">Login</a></li>
                    <li><a href="projects.html">Projects</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
            <div id="id-select">
                <select>
                    <option value="english">English</option>
                    <option value="chinese">Chinese</option>
                    <option value="spanish">Spanish</option>
                    <option value="portugese">Portugese</option>
                </select>
            </div>
            <div class="clear"></div>
        </div>
    </nav>
    <div class="clear"></div>
</div>
<!----------------------------------MAIN---------------------------------------------->

Answer 1

进行以下更改，以实现所需的外观。在CSS中，进行以下更改：

#list1 li {

    float: left;
    padding-left: 5px;
    margin-left: 5px;
    padding-right: 5px;
    margin-top: 5px;
    margin-bottom: 2px;
}

enter image description here

Answer 2

您的问题可以通过简单地减少列表项或列表中的填充来解决一个元素。边框将接近文本。 #register{ padding: 0; } 或（首选） a{ padding: 0; }

如何控制元素周围的div或框

2 个答案: