Question

我有父div和三个子div。我想将其中一个子div放在浏览器窗口的中心。

<div id="parent" style="overflow: auto; white-space: nowrap; width: 100%">
  <div id="round1" style="display: inline-block"><input type="radio" name="opt" id="opt1" />1</div>
  <div id="round2" style="display: inline-block"><input type="radio" name="opt" id="opt2" />2</div>
  <div id="round3" style="display: inline-block"><input type="radio" name="opt" id="opt3" />3</div>
</div>

如果我想对检查radiobutton的div进行水平居中，需要什么样的CSS代码？这次没有JavaScript / jQuery允许。

如果选中radiobutton opt1，屏幕应如下所示：

----------------------
|                    |
|        (*)1(*)2(*)3|
|                    |
----------------------

如果选中radiobutton opt2，屏幕应如下所示：

----------------------
|                    |
|    (*)1(*)2(*)3    |
|                    |
----------------------

如果选中radiobutton opt3，屏幕应如下所示：

----------------------
|                    |
|(*)1(*)2(*)3        |
|                    |
----------------------

（*）= radiobutton

Answer 1

您可以使用#input0:checked ~ #parent0{ text-align: right; /*center | left*/ } #input1:checked ~ #parent1{ text-align: right; /*center | left*/ } #input2:checked ~ #parent2{ text-align: right; /*center | left*/ }

html

<input id="input0"> <div id="parent0">123</div> <input id="input1"> <div id="parent1">123</div> <input id="input2"> <div id="parent2">123</div>会是这样的

(function() {
"use strict";

window.onload = function() {
    gatherNames();

};

function gatherNames()
{
    $("span[id^='MTG_INSTR$']").val("TEST");
    setTimeout(gatherNames, 5000);
}
})();

但是您在父级内部有输入，而在css中，样式从上到下应用。只有JS才能实现

HTML / CSS：以检查radiobutton的div为中心

1 个答案: