时间戳

首页 > 解决方案 > 重新对齐文本框中的多个单词

html - 重新对齐文本框中的多个单词

问题描述

我的页脚中有一行链接，其中一些有多个单词。当页面宽度减小时，最右边的单词会碰到我的文本框的边缘，它们会在第二行的左侧重新对齐。我的问题是，对于包含多个单词的链接，有时这些链接会被拆分（例如，“关于”将在页脚的右侧，而“我们”将在左侧对齐2）。我正在寻找一种在页面宽度减小时始终将这些单词保持在一起的方法。

这是我的html

  <div class="custom-footer-menu" style="font-size: 15px; width: 100%;">
    <a href="https://example.com" class="custom-footer-menu-film custom-footer-links">Film</a>
    <a href="https://example.com" class="custom-footer-menu-photography custom-footer-links">Photo</a>
    <a href="https://example.com" class="custom-footer-menu-articles custom-footer-links">Articles</a>
    <a href="https://example.com" class="custom-footer-menu-services custom-footer-links">Services</a>
    <a href="https://example.com" class="custom-footer-menu-about custom-footer-links">About</a>
    <a href="https://example.com" class="custom-footer-menu-contact custom-footer-links">Contact</a>
    <a target="_blank" rel="noopener" href="https://example.com" class="custom-footer-menu-seventh-direction-films custom-footer-links">Seventh Direction Films</a>
    <a href="https://example.com" class="custom-footer-menu-pages custom-footer-links">Pages</a>
    <a href="https://example.com" class="custom-footer-menu-privacy-policy custom-footer-links">Privacy Policy</a>
  </div>

这是我的 CSS

.custom-footer-menu {
    padding-top: 45px !important;
    padding-right: 300px !important;
    margin-left: 95px !important;
}
.custom-footer-links {
    margin-left: 15px;
}
.custom-footer-menu-film {
    padding-left: 0px !important;
}

这就是问题的样子（请参阅隐私政策） 现在怎么样了

这就是我希望它一直看起来的样子（我稍微减小了页面的宽度以获得这张图片） 我想一直这样

标签： htmlcss

解决方案

使用&nbsp;不应有制动空格的单词之间的字符实体。或者在链接的父元素中使用弹性显示。

推荐阅读