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>

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>

Answer 2

将类似的输入包裹在一个跨度中并添加样式，如下所示。

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

Answer 3

尝试创建一个类并在您的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>

Answer 4

您可以这样简化：

:root {
    --margin: 10px;
}

div {
    font-size: 0;
}

input {
    margin: var(--margin);
    width: calc(var(--w,20%) - var(--margin) * 2);
    box-sizing: border-box;
}

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

您还可以使用nth-child

避免使用内联样式

:root {
    --margin: 10px;
}

div {
    font-size: 0;
}

input {
    margin: var(--margin);
    width: calc(var(--w,20%) - var(--margin) * 2);
    box-sizing: border-box;
}
input:nth-child(1),
input:nth-child(2) {
 --w:50%;
}
input:nth-child(3),
input:nth-child(4),
input:nth-child(5),
input:nth-child(6){
 --w:25%;
}

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

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>

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>

Answer 7

我认为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)，您可以轻松地在任何元素上使用此计算。

缩短“ width：calc（...-（margin * 2））”

7 个答案: