Question

我已将CSS和HTML包含在垂直导航栏中。我的问题是，我希望每个链接按钮具有相同的宽度，我没有做到。我尝试使用宽度，但它没有工作？我也希望能够摆脱链接之间的白线。

<style>
        .ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 0;
            background-color: grey;
        }
        .list{
            display: inline;
            width: 200px;
            display: block;
            padding: 10px;
        }
        .link:link{
            text-decoration: none;
            background-color: grey;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:visited{
            text-decoration: none;
            background-color: blue;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:hover{
            text-decoration: none;
            background-color: black;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:active{
            text-decoration: none;
            background-color: yellow;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

    </style>
</head>
<body>
        <ul class="ul">
            <li class="list"><a class="link" href="http://www.google.ca">HTML</a></li>
            <li class="list"><a class="link" href="http://www.google.ca">Cascading Style Sheet</a></li>
            <li class="list"><a class="link" href="http://www.google.ca">Javascript</a></li>
            <li class="list"><a class="link" href="http://www.google.ca">PHP</a></li>
        </ul>

Answer 1

我通过删除链接上的类和一些冗余的CSS来简化它。白线是你的额外填充。并且颜色需要在列表中。

＆＃13;

.ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list {
  display: inline;
  width: 200px;
  display: block;
  padding: 10px;
  background-color: grey;
}

.list a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}
.list:visited{
  background-color: blue;
}
.list:hover{
  background-color: black;
}
.list:active{
  background-color: yellow;
}

＆＃13;

<ul class="ul">
       <li class="list"><a href="http://www.google.ca">HTML</a></li>
       <li class="list"><a href="http://www.google.ca">Cascading Style Sheet</a></li>
       <li class="list"><a href="http://www.google.ca">Javascript</a></li>
       <li class="list"><a href="http://www.google.ca">PHP</a></li>
</ul>

＆＃13;

Answer 2

您需要为 .link 类指定一个宽度，并为 .list 类指定高度。像这样：

.ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 0;
            background-color: grey;
        }
        .list{
            width: 200px;
            display: block;
            height: 19px;
            padding: 10px;
        }
        .link:link{
            text-decoration: none;
            background-color: grey;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:visited{
            text-decoration: none;
            background-color: blue;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:hover{
            text-decoration: none;
            background-color: black;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:active{
            text-decoration: none;
            background-color: yellow;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

        .link {
            width: 150px;
            display:block;
        }

https://jsfiddle.net/GunWanderer/zmL9boso/1/

Answer 3

您需要设置要阻止的元素的显示。例如.list{ .link: display: block; }

        .ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 30%;
        }

        .list{
            padding: 10px;
            background-color: gray;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .link{
            display: block;
        }
        .link:link{
            text-decoration: none;
            background-color: grey;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

        .link:visited{
            text-decoration: none;
            background-color: blue;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

        .link:hover{
            text-decoration: none;
            background-color: black;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

        .link:active{
            text-decoration: none;
            background-color: yellow;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

<ul class="ul">
 <li class="list"><a class="link" href="http://www.google.ca">HTML</a></li>
 <li class="list"><a class="link" href="http://www.google.ca">Cascading Style Sheet</a></li>
<li class="list"><a class="link" href="http://www.google.ca">Javascript</a></li>
<li class="list"><a class="link" href="http://www.google.ca">PHP</a></li>
</ul>

Answer 4

你的ul元素的宽度为0.我所要做的就是设置它。我选择200px是因为你将list设置为200.

<style>
        li a {
          display: block;
        }
        .ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            width: 200px;
            background-color: grey;
        }
        .list{
            display: inline;
            width: 200px;
            display: block;
            padding: 10px;
        }
        .link:link{
            text-decoration: none;
            background-color: grey;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:visited{
            text-decoration: none;
            background-color: blue;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:hover{
            text-decoration: none;
            background-color: black;
            color: white;
            padding: 10px;
            font-weight: bold;
        }
        .link:active{
            text-decoration: none;
            background-color: yellow;
            color: white;
            padding: 10px;
            font-weight: bold;
        }

    </style>
</head>
<body>
        <ul class="ul">
            <li class="list"><a class="link" href="http://www.google.ca">HTML</a></li>
            <li class="list"><a class="link" href="http://www.google.ca">Cascading Style Sheet</a></li>
            <li class="list"><a class="link" href="http://www.google.ca">Javascript</a></li>
            <li class="list"><a class="link" href="http://www.google.ca">PHP</a></li>
        </ul>

我看不到链接之间的白线......

http://codepen.io/zsawaf/pen/VjXKXV

Answer 5

将background-color: grey;添加到.list课程并检查结果。

如果你没有得到你的结果，

重播

垂直导航栏宽度

5 个答案: