ラジオボタンをdivの外側に配置し、同時にボディ幅の外側に配置することはできますか？divの外側の中央のラジオボタン
<body>
<div class='container'>
<div class='box'>
<form>
<input type="radio" name="points" value="1">
<input type="radio" name="points" value="-1">
</form>
<div class='middle'>just a div</div>
</div>
</body>
divの左右に表示するには、ある種のCSSを使用することをおすすめします。
が、私はこのためにフィドルを作成しました：https://jsfiddle.net/qhatn0a8/
私はCSSの左を使用してみましたが：-100px;しかし、他のボタンでCSSを正しく使用する方法はありますか？
予想される結果を理解するために2度読んでいました。
位置：relative &アブソリュートを使用することができます。しかし、いずれの場合も、label（およびその属性for）を使用する必要があります。そのため、各入力はテキストの説明とリンクしています。
は、位置についての考えは、ラベルの内側に、入力とテキストの両方をラップすることです：
body {
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
.box {
background-color: grey;
padding: 10px;
margin-bottom: 10px;
position:relative;/* added for absolute labels */
/* height removed , seems not needed here */
}
.middle {
background-color: red;
}
input[type="radio"] {
margin-right: 10px;
}
label {/* use coordonate so no need to size them */
position:absolute;
right:100%;
margin:0 1em;
white-space:nowrap;
}
label + label {
right:auto;
left:100%;
}<body>
<div class='container'>
<div class='box'>
<form>
<label>
<input type="radio" name="points" value="1">point1</label>
<label>
<input type="radio" name="points" value="-1">point2</label>
</form>
<div class='middle'>just a div</div>
</div>
<div class='box'>
<form>
<label>
<input type="radio" name="points" value="1">point1</label>
<label>
<input type="radio" name="points" value="-1">point2</label>
</form>
<div class='middle'>just a div</div>
</div>
<div class='box'>
<form>
<label>
<input type="radio" name="points" value="1">any text for point1</label>
<label>
<input type="radio" name="points" value="-1">point2</label>
</form>
<div class='middle'>just a div</div>
</div>
<div class='box'>
<form>
<label>
<input type="radio" name="points" value="1">point1</label>
<label>
<input type="radio" name="points" value="-1">point2 or any text</label>
</form>
<div class='middle'>just a div</div>
</div>
</div>
</body>注：ボタンとテキストはさておき他のコンテンツの上に行くか、またはので、画面をオフに行くことができ、
完璧なソリューション！説明を悪くして申し訳ありません。飲みすぎないように！ –
divボックスの垂直方向の中心を合わせる方法もお尋ねしますか？ボックスの高さが例の場合：https://jsfiddle.net/qhatn0a8/3/ 編集：nvm、margin-top：50％;それを解決する –
ADD）、絶対位置で、彼らは、流れから外れていますあなたの入力の周りにラベルを付けて、それらにCSSを追加します。
フォームの位置：相対、入力absoulte;
body {
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}
.box {
background-color: grey;
padding: 10px;
margin-bottom: 10px;
height: auto;
}
.middle {
background-color: red;
}
input[type="radio"] {
margin: 0 10px 0 10px;
}
.box label:first-child {
position: absolute;
right:100%;
margin-right:10px;
}
.box label:last-child {
position: absolute;
left: 100%
}
.box form {
position: relative;
}
label{
white-space:nowrap;
margin: 1%
}<div class='container'>
<div class='box'>
<form>
<label>
<input type="radio" name="points" value="1">point1</label>
<label>
<input type="radio" name="points" value="-1">point2
<br>
</label>
</form>
<div class='middle'>just a div</div>
</div>
あなたのdivがなぜ実際にラジオボタンの間に入れていない "だけdiv要素" である場合は？ – Nol
あなたは何を中心にしたいのか、何に関係しているのかはっきりしていませんか？ –