如何使用CSS根据另一个元素的存在来调整元素的宽度

Question

我的左边有一个输入框，右边有一个按钮。在某些页面上，我想在输入框旁边放置一个复选框，并将按钮移动到下方/下方。有没有办法使用 CSS flexbox 或其他东西来做到这一点？我有一个 JavaScript 条件来确定复选框是否应该出现在页面上，但不确定如何按照上述方式进行布局。<div>  <input type="text" />  <!-- I would like this checkbox to be present only some of the time  <input type = "checkbox" /> -->  <button> click me </button></div>

Answer 1

这很简单adjacent sibling combinator，不需要 JavaScript。只需选择任何button紧邻input[type="checkbox"]并使其显示block（而不是inline）。

input[type="checkbox"] + button {

  display: block;

}

<div>

  <input type="text" />

  <input type = "checkbox" />

  <button> click me </button>

</div>

<div>

  <input type="text" />

  <button> click me </button>

</div>

Answer 2

您在寻找这样的东西吗？

运行下面的代码片段：

//here we are getting each element by its id

var check = document.getElementById("check");

var input = document.getElementById("input");

var button = document.getElementById("button");

//this is the condition we're using (it could be anything but it was easy to use a boolean for this example)

var bool = false;

//here is the function we're calling on click

function clickMe() {

//when button is clicked we set bool from false to true

bool = true;

//if bool is true we we will apply the following styles to the check and button

if (bool === true) {

check.style.display = "inline-block";

button.style.display = "block";

}

}

#check {

display: none;

}

<input type="checkbox" id="check"><input id="input"><button id="button" onclick="clickMe();">Click Me</button>

Answer 3

建议切换父级的样式

function toggleClass() {

  const element = document.getElementById("container")

  element.classList.toggle("toggle");

}

#checkbox {

  display:none;

}

.toggle #checkbox {

  display:block;

}

<div id="container">

  <input type="text"/>

  <input id="checkbox" type="checkbox"/>

  <button onClick="toggleClass()">Button</button>

</div>