Question

我有这个问题，边框一直在屏幕上。我怎样才能缩短它？

HTML：

<ul id="tabs">
    <li> <a href=page1 </a> </li>
    <li> <a href=page2 </a> </li>
    <li> <a href=page3 </a> </li>

CSS：

#tabs { 
    margin: 1em 0 0 0; 
}

#tabs li { 
    display: inline; 
    width: 50px; 
}

#tabs {
    padding: 2px 8px 2px 8px; 
    border: 1px solid #4a7194; 
    margin-left: .5em; text-decoration: none;
}

Answer 1

首先，您的标记无效：您缺少开始锚标记的结束尖括号。

边框会越过屏幕，因为这是块元素<ul>的默认行为;占用可用的宽度。

有几种方法可以达到你想要的效果，一种是display你的<ul>作为内联块元素：

#tabs {
    margin: 1em 0 0 0;
    display: inline-block;
}

JSFiddle

或的

你可以float左边的<ul>。但是，这将从文档流程中删除它：

#tabs {
    margin: 1em 0 0 0;
    float: left;
}

JSFiddle

除非你不希望它只跨越它的内容的宽度，而是一个固定的宽度：

#tabs {
    margin: 1em 0 0 0;
    width: 400px;
}

JSFiddle

html css如何缩短标签

1 个答案: