Question

感谢您抽出宝贵时间阅读我的评论。我是这个网站的新手，所以我希望我能以正确的方式做所有事情。本周我获得了一项大学任务，用于网络开发，并且完成了一部分。我希望所有边框都是相同的大小，而不仅仅是每个文本部分的大小。我有一个被访问的，徘徊的，所有的准备好了。它只是使所有的矩形大小相同。任何反馈将不胜感激。

我的链接设置如下：

HTML

    <div id="SideNav">
    <ul>
        <li><a href="index.html" class="button">Home    </a></li>
        <li><a href="" class="button">Current Issue     </a></li>
        <li><a href="" class="button">Back Issues       </a></li>
        <li><a href="" class="button">Articles          </a></li>
        <li><a href="" class="button">Editorial Policy  </a></li>
        <li><a href="" class="button">Submissions       </a></li>
        <li><a href="" class="button">MA CAA            </a></li>
        <li><a href="" class="button">Links             </a></li>
        <li><a href="" class="button">Contact US        </a></li>
    </ul>
    </div>

CSS

    #SideNav{
     float: left;
     width:20%;
    }

    #SideNav ul{
     list-style:none;       
    }

        .button { 

    border: 0.1em inset #000000;
    padding: .25em  .125em;
    color: #ffffff;
    background-color: #ffffff;
    font-family: Times New Roman, Times, serif;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    text-decoration:none;
    clear:both;  
}

Answer 1

您可以设置display:block;，并进行另一项完美调整。

<强> CSS

 #SideNav {
     float: left;
     width:30%;
 }
 #SideNav ul {
     list-style:none;
     display:block;
 }
 .button {
     display: block;
     border: solid 1px #ccc;
     padding: .25em .125em;
     color: #ffffff;
     background-color: #ffffff;
     font-family: Times New Roman, Times, serif;
     font-size: 1em;
     font-weight: bold;
     text-align: center;
     text-decoration:none;
     color: #000;
     border-top:none;
 }
 li:first-child {
     border-top: solid 1px #ccc;
 }

<强> HTML

<div id="SideNav">
    <ul>
        <li><a href="index.html" class="button">Home    </a>
        </li>
        <li><a href="" class="button">Current Issue     </a>
        </li>
        <li><a href="" class="button">Back Issues       </a>
        </li>
        <li><a href="" class="button">Articles          </a>
        </li>
        <li><a href="" class="button">Editorial Policy  </a>
        </li>
        <li><a href="" class="button">Submissions       </a>
        </li>
        <li><a href="" class="button">MA CAA            </a>
        </li>
        <li><a href="" class="button">Links             </a>
        </li>
        <li><a href="" class="button">Contact US        </a>
        </li>
    </ul>
</div>

<强> DEMO HERE

Answer 2

问题：

文字不清晰（changed Color to black）。
<br> tag：您不需要使用它，您可以通过css（display: block;）将任何元素放在新行中。等等

但是，我解决了你的问题。

jsfiddle

CSS中链接周围的边框大小相同

2 个答案: