CSS根据文本宽度定位文本答案

【问题标题】：CSS position text depending on text-widthCSS根据文本宽度定位文本
【发布时间】：2019-07-19 05:54:21
【问题描述】：

我正在努力实现这个设计

我有以下标记，它无法更改：

<button>
  <svg>
    <use xlink:href="/icon/path"></use>
  </svg>
  <p class="text">Viewing</p>
</button>

实现这一点的css如下：

.text {
  position: absolute;
  top: 4px;
  left: -4em;
}

但是如果文本改变长度会导致：

我尝试使用calc 和transform 以及将position:absolute 更改为relative，但没有任何效果。这不能用 CSS 实现吗？

【问题讨论】：

使用右而不是左，并确保你有位置：按钮上的相对
可以用 JQuery o 只用 CSS 完成吗？
对不起，我添加了课程，它在正文中。
使按钮相对，使图标绝对并放在右边，将 padding-right 添加到.text，这样图标就不会重叠

标签： css css-position

【解决方案1】：

将按钮设为相对，将图标设为绝对并将其放在右侧，将 padding-right 添加到 .text 以使图标永远不会重叠

查看右侧的空间，那将是您的 svg 图标（绿色）。您需要将间距调整为图标的实际间距，下面的代码只是向您展示采取的方法

button {
  position: relative;
}

svg {
  position: absolute;
  right: 3px;
  background: green;
  width: 15px;
  height: 30px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.text {
  padding-right: 20px;
}

<button>
  <svg>
    <use xlink:href="/icon/path"></use>
  </svg>
  <p class="text">Viewing</p>
</button>

<button>
  <svg>
    <use xlink:href="/icon/path"></use>
  </svg>
  <p class="text">Viffdewingsdfsdfasfdfsa</p>
</button>

【讨论】：

应避免使用绝对位置，因为并非所有浏览器都能正确显示它们。
@klediooo 哪个浏览器不能正确显示这个简单的css？
只要用户不改变他们的字体大小，我猜它会起作用。否则，如果他们这样做，他们就会遇到问题。 stackoverflow.com/questions/687938/…
这不会是一个问题，绝对定位无处不在。我还将图标垂直居中，所以即使字体更大，图标也会居中。此外，用户可以做很多事情使事情不起作用，但这并不意味着您不应该使用它。我可以在我的浏览器上禁用 js，因为我是偏执狂，99% 的在线网站都无法运行。

【解决方案2】：

您可以为 svg-tag 使用 margin-left。

我也想知道 css 应该如何影响某些东西，因为您的 html 中甚至没有类“文本”。所以也许这也可能是一个问题。 :)

【讨论】：

然后尝试使用 margin-left 代替。

【解决方案3】：

svg {
    position: relative;
    right: 3px;
    background: green;
    width: 15px;
    height: 20px;
}

.text {      
    display: inline;
    padding-right: 10px;
}

<button>
    <p class="text">Viewing</p>
    <svg>
        <use xlink:href="/icon/path"></use>
    </svg>
</button>

<button>
    <p class="text">Viffdewingsdfsdfasfdfsa</p>
    <svg>
        <use xlink:href="/icon/path"></use>
    </svg>
</button>

关于绝对位置，他用第一个设置了相对位置的元素来定位自己。如果将按钮设置为相对位置，则在设置顶部、右侧、左侧或底部时。如果他不看屏幕，他会看按钮设置自己的位置。

正因为如此，他跑过了你的元素，他出了页面流。

【讨论】：