缩短“width: calc(... - (margin * 2))”

Question

有没有缩短这段代码的方法？通过创建一个类或其他方式。我的理想解决方案是像这样：<input style="width: 50%">。但我的最大问题是我需要减去输入元素边距的宽度。

我希望有一种方法可以删除 calc(... - var(--marginDouble)) 的重复部分。

:root {
    --margin: 10px;
    --marginDouble: calc(var(--margin) * 2);
}

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
}

<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input style="width: calc(50% - var(--marginDouble))">
    <input style="width: calc(50% - var(--marginDouble))">
    <br>
    <input style="width: calc(25% - var(--marginDouble))">
    <input style="width: calc(25% - var(--marginDouble))">
    <input style="width: calc(25% - var(--marginDouble))">
    <input style="width: calc(25% - var(--marginDouble))">

    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
    <input style="width: calc(20% - var(--marginDouble))">
</div>

- Paul Kruger

Answer 1

你可以将百分比放入自定义属性中。

:root {
    --margin: 10px;
    --marginDouble: calc(var(--margin) * 2);
}

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
    width: calc(var(--width, 100%) - var(--marginDouble))
}

<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input>
    <br>
    <input style="--width: 50%">
    <input style="--width: 50%">
    <br>
    <input style="--width: 25%">
    <input style="--width: 25%">
    <input style="--width: 25%">
    <input style="--width: 25%">

    <input style="--width: 20%">
    <input style="--width: 20%">
    <input style="--width: 20%">
    <input style="--width: 20%">
    <input style="--width: 20%">
</div>

- James Long

---

变量的默认值可以直接使用var(--w,100%)添加，无需声明自定义CSS。 - Temani Afif

请澄清一下，,100% 的意思是如果没有给定值，则使用 100% 吗？ - Paul Kruger

是的。除非另有说明，否则为全宽度。这就是为什么我示例中的第一个输入是全宽度的原因。 - James Long

@PaulKruger 这会让你赢得更多代码，因为你可以依靠它来指定最常用的值...就像我在我的答案中所做的那样: https://stackoverflow.com/a/51136168/8620333 - Temani Afif

Answer 2

在我看来，James Long的回答是最好的，但我更喜欢这样做：

:root {
    --w10: calc( 10% - (var(--marginInputs) * 2) );
    --w25: calc( 25% - (var(--marginInputs) * 2) );
    --w50: calc( 50% - (var(--marginInputs) * 2) );
    --w75: calc( 75% - (var(--marginInputs) * 2) );
    --w34: calc( 34% - (var(--marginInputs) * 2) );
    --w66: calc( 66% - (var(--marginInputs) * 2) );
    --w100: calc( 100% - (var(--marginInputs) * 2) );
}

然后可以通过 width: var(--wX) 使用它。

我认为这种方式更好的原因是，你不需要将 width: calc(var(--width, 100%) - var(--marginDouble)) 这行代码添加到想要影响的每个元素中。使用 width: var(--wX)，你可以在任何元素上轻松使用这个计算公式。

- Paul Kruger

Answer 3

将相似的输入内容用标签包裹，并按照下面所示的样式添加样式。

:root {
  --margin: 10px;
  --marginDouble: calc(var(--margin) * 2);
}

div {
  font-size: 0;
}

input {
  margin: calc(var(--margin));
  box-sizing: border-box;
}

.a input {
  width: calc(50% - var(--marginDouble));
}

.b input {
  width: calc(25% - var(--marginDouble));
}

.c input {
  width: calc(20% - var(--marginDouble));
}

<div style="width: 400px; background-color: rgb(185, 185, 185)">
  <span class="a">
    <input >
    <input>
  </span>
  <br>
  <span class="b">
    <input>
    <input>
    <input>
    <input>
  </span>
  <span class="c">
    <input>
    <input>
    <input>
    <input>
    <input>
  </span>
</div>

- Nandita Sharma

Answer 4

尝试创建一个类并在您的HTML代码中使用它。

:root {
  --margin: 10px;
  --marginDouble: calc(var(--margin) * 2);
}

div {
  font-size: 0;
}

input {
  margin: calc(var(--margin));
  box-sizing: border-box;
}

.fiftypercent {
  width: calc(50% - var(--marginDouble));
}

.twentyfivepercent {
  width: calc(25% - var(--marginDouble));
}

.twentypercent {
  width: calc(20% - var(--marginDouble));
}

<div style="width: 400px; background-color: rgb(185, 185, 185)">
  <input class="fiftypercent">
  <input class="fiftypercent">
  <br>
  <input class="twentyfivepercent">
  <input class="twentyfivepercent">
  <input class="twentypercent">
</div>

- Daniel Bürckner

Answer 5

您可以使用内联样式指定变量：

:root {
    --margin: 10px;
    --marginDouble: calc(var(--margin) * 2);
}

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
    width: calc(var(--input-width) - var(--marginDouble))
}

<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input style="--input-width: 50%">
    <input style="--input-width: 50%">
    <br>
    <input style="--input-width: 25%">
    <input style="--input-width: 25%">
    <input style="--input-width: 25%">
    <input style="--input-width: 25%">

    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
    <input style="--input-width: 20%">
</div>

- SuperDJ

Answer 6

这是一个不需要类或行或额外变量的解决方案。

:root {
    --margin: 10px;
    --marginDouble: calc(var(--margin) * 2);
}

div {
    font-size: 0;
}

input {
    margin: calc(var(--margin));
    box-sizing: border-box;
    width:calc(50% - var(--marginDouble));
}

input:nth-child(n+3) {width:calc(25% - var(--marginDouble));}
input:nth-child(n+7) {width:calc(20% - var(--marginDouble));}

<div style="width: 400px; background-color: rgb(185, 185, 185)">
    <input>
    <input>

    <input>
    <input>
    <input>
    <input>

    <input>
    <input>
    <input>
    <input>
    <input>

</div>

- Mr Lister