Question

1）文字被圆形边框切断。如果文本也在边框中，如何添加足够的间距以使文本不被切断？

2）另外，我想在整个导航栏周围创建一个边框，但为什么只出现顶部边框？

＆＃13;

<style>
   
ul { 
    border: 2px solid;
    border-top-left-radius: 2em;
    list-style-type: none;
    margin: 0;
    padding: 0%;
    width: 100%;
    height: 100%;
    background-color: #dddddd;
}

li {
    float: left;
}

a {
    border: 2px solid;
    border-top-left-radius:2em;
    display: block;
    width: 100%;
    background-color: #dddddd;
    font-size:20px;
    font-family: "Times New Roman", Times, serif;
    font-style:bold,italic;
    color:red;
    text-align:center;
}

a:hover { 
    border: 2px solid;
    border-top-left-radius: 0em;
    background-color: red;
    font-size:20px;
    font-family: "Times New Roman", Times, serif;
    font-style:bold,italic;
    color:red;
}

</style>

＆＃13;

Answer 1

CSS

.fix{clear:both} /*Use this to clear float*/
ul { 
border: 2px solid;
border-top-left-radius: 2em;
list-style-type: none;
margin: 0;
padding: 0%;
background-color: #dddddd;
}
li {
float: left;
margin-left:16px; /*Adjust margin as per your need*/
}
li:first-child{margin-left:0px} /*add this to arrange first menu item*/
a {
border: 2px solid; 
border-top-left-radius:2em;
display: block;
width: 100%;
background-color: #dddddd;
font-size:20px;
font-family: "Times New Roman", Times, serif;
/*font-style:bold,italic; this is not correct, Add font-weight: bold and font-style:italic*/
font-weight: bold;
font-style:italic;
color:red;
text-align:center;
padding:3px 7px;
}
a:hover { 
border: 2px solid;
border-top-left-radius: 0em;
background-color: red;
font-size:20px;
font-family: "Times New Roman", Times, serif;
font-style:bold,italic;
color:red;
}

添加了HTML（可能与您的不一样）

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">Company</a></li>
    <li><a href="">Contact</a></li>
    <div class="fix"></div>
</ul>

看看它是否有效。！

Answer 2

您需要为每个菜单项设置padding-left，理想情况下为1em（1个字符）或更少，将padding-right设置为较小值时，右侧看起来更好。 How padding works

这属于您的a { css：

    padding: 0 0.1em 0 0.4em;

边界的问题是由于使用float，正如@CBroe指出的那样。您可以设置display:inline-block或overflow:hidden来解决此问题。见explanation here

css validator有助于避免因发布前没有检查代码而被低估。

＆＃13;

<style>       
   ul { border: 2px solid;
   border-top-left-radius: 2em;
   display:inline-block;
   list-style-type: none;
   margin: 0;
   padding: 0%;
   width: 100%;
   height:100%;
   background-color: #dddddd;
}
li {
    float: left;
}

a {
 border: 2px solid;
 border-top-left-radius:2em;
 display: block;
 width: 100%;
 background-color: #dddddd;
 font-size:20px;
 font-family: "Times New Roman", Times, serif;
 font-style:bold,italic;
 color:red;
 text-align:center;
 padding: 0 0.1em 0 0.4em;
}
a:hover 
{ border: 2px solid;
  border-top-left-radius: 0em;
  background-color: red;
  font-size:20px;
  font-family: "Times New Roman", Times, serif;
  font-style:bold,italic;
  color:red;
}
a:active
{

}
</style>

＆＃13;

Answer 3

尝试对CSS进行这些添加/调整：

executeAsync

你提到的第二个问题（围绕整个导航的边框）是一个常见的CSS 101问题，它与“clearing floats”有关。

如何在css中添加文本间距

3 个答案: