Question

基本上我创建了几个单选按钮，然后隐藏了实际按钮，并将标签作为按钮。由于某种原因，他们不会显示内联，我似乎无法弄清楚原因。有谁知道我做错了什么？

.ReviewBox {
	width:64%;
	height:600px;
	position:relative;
	left:18%;
	background-color:#4795d7;
	margin-bottom:10px;
	box-shadow:0px 2px 4px black;
	border-radius:4px;
}

.ReviewBox input {
	visibility:hidden; 
	width:0;
	display:inline;
}

.ReviewBox label:hover {
	color:#00aedb;
}

.ReviewBox input:checked + label {
	color:#0900ff;
}

.ReviewBox p {
	position:absolute;
	left:12%;
	color:white;
}

.ReviewBox label {
	position:relative;
	left:45%;
	color:white;
	display:inline;
}

.ReviewHeader {
	position:relative;
	left:7%;
	top:32px;
	font-size:26px;
	text-shadow:0px 1px 1px black;
	font-family:Lobster;
	color:white;
}

.Server {
	top:75px;
	font-size:15px;
}

.Names  label{
	top:27px;
	font-size:15px;
}

<div class="ReviewBox">
			
			<h2 class="ReviewHeader">Let Us Know How We Did</h2>
			
			<div>
				<p class="Server">Server</p>
				<div class="Names">
				
					<input type="radio" name="Names" value="Juan" id="Juan">
					<label for="Juan">Juan</label>
					
				</div>
				
				<div class="Names">
				
					<input type="radio" name="Names" value="Sebastian" id="Sebastian">
					<label for="Sebastian">Sebastian</label>
					
				</div>
			</div>

这是我所拥有的JSFiddle：http://jsfiddle.net/u6u53916/1/

Answer 1

<div class="names">
    <input type="radio" name="Names" value="Juan" id="Juan"/>
    <label for="Juan">Juan</label>
    <input type="radio" name="Names" value="Pablo" id="Pablo"/>
    <label for="Pablo">Pablo</label>
</div>

只需移除中间<div class="names">，使其成为包含单选按钮的单个div。

Answer 2

只需将display: inline;添加到Names课程即可。这是您的代码+您正在寻找的内容： http://jsfiddle.net/Igor_Ivancha/kywno6q0/

如何修复我的单选按钮是否内联？

2 个答案: