CSS位置文字取决于文字宽度

Question

我正在尝试实现这种设计

我有以下标记，并且不能进行更改：

<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无法做到这一点吗？

Answer 1

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

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

Rails.application.config.assets.precompile += %w[jquery.js jasmine-jquery.js]

button {
  position: relative;
}

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

.text {
  padding-right: 20px;
}

Answer 2

您可以在svg-tag中使用margin-left。

我还想知道CSS应该如何影响某些内容，因为您的html中甚至没有类“ text”。所以也许这也可能是一个问题。 ：）

Answer 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>

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

因此，他遇到了您的元素，因此页面流出。