css 环绕锚链接并调整Div [复制]的宽度

s1ag04yj 于 2023-05-08 发布在其他

关注(0)|答案(3)|浏览(102)

此问题已在此处有答案：

How to resize the width of a div to fit word wrap?（3个答案）
昨天关门了。
我的网站上的子导航菜单出现了问题。问题是，当浏览器窗口小到足以换行时，包含文本“Mathematik & Naturwissenschaften”的<a>标记无法正确调整大小。期望的外观没有“空灰色空间”。

ul#subnavi a {
  float: left;
  font-size: 0.8em;
  letter-spacing: 1px;
  text-decoration: none;
  color: #fff;
  padding: 10px;
  padding-top: 2px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  font-weight: bold;
  line-height: 150%;
  background-color: #9c9e9f;
  clear: left;
}

ul#subnavi {
    list-style-type: none;
}

<ul id="subnavi">
  <li><a href="XYZ">Sprachen</a></li>
  <li><a href="XYZ">Gesellschaftswissenschaften</a></li>
  <li><a href="XYZ">Mathematik &amp; Naturwissenschaften</a></li>
  <li><a href="XYZ">künstlerisch-musische Fächer</a></li>
  <li><a href="XYZ">Religion</a></li>
  <li><a href="XYZ">Sport</a></li>
</ul>

css

来源：https://stackoverflow.com/questions/35347243/wrap-anchor-links-and-adjust-width-of-div

3条答案

按热度按时间

wb1gzix01#

您可以用途：white-space: nowrap;

赞(0）回复(0）举报 2023-05-08

umuewwlo2#

只需将行white-space: nowrap;添加到CSS部分即可。下面是一个工作示例https://jsfiddle.net/zkmpwry9/。
white-space属性用于描述如何处理元素中的空白。
瑙拉普
像正常一样折叠空白，但禁止文本中的换行符（文本换行）。

ul#subnavi a {
    float: left;
    font-size: 0.8em;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    padding-top: 2px;
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-weight: bold;
    line-height: 150%;
    background-color: #9c9e9f;
    clear: left;
    white-space: nowrap; /* the extra line */
}

赞(0）回复(0）举报 2023-05-08

aemubtdh3#

使用空白：现在，这有助于不崩溃！

赞(0）回复(0）举报 2023-05-08