Question

现在我的处境就像

这些盒子包装在一起。

我希望它像

有可能吗？

有人可以提供帮助吗？

这是代码

body{
    font-size:100%;
    background-color: rgb(255,205,255);
}

.cakeform{
    margin: auto;
    width: 70%;
    border: 3px solid;
    padding: 10px;
    font-size:1.6em;
}

.cakedisplay{
    margin:auto;
    width:50%;
}

h1,p{
    text-align:center;
    max-width:100%;
}

img{
    height:150px;
    width:200px;
    max-width:100%;
    cursor: pointer;
}

.cakedisplay label{
    display:inline-block;
    text-align:center;
}

input[type="radio"]{
    display:none;
}

input[type="radio"]:checked+img{
    border: 1px solid red;
}

<!DOCTYPE html>
<html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    </style>
</head>
<body>
    <form class="cakeform">
        <div class="cakedisplay">
            <h1>Cake</h1>
    		<label><input type="radio" name="Ctype" value="Sponge Cake"> <img src="img/cake/spongecake.png"><br>Sponge Cake</label>
	    	<label><input type="radio" name="Ctype" value="Cheese Cake"> <img src="img/cake/cheesecake.png"><br>Cheese Cake</label>
	    	<label><input type="radio" name="Ctype" value="Icecream Cake"> <img src="img/cake/icecreamcake.png"><br>Icecream Cake</label>
	    	<label><input type="radio" name="Ctype" value="Mille Crepe"> <img src="img/cake/millecrepe.png"><br>Mille Crepe</label>
		    <br>
	        <button type="button" class="btnNext">Next</button>
        </div>
    </form>
</body>
</html>

Answer 1

您可以为标签使用填充。

body{
    	font-size:100%;
    	background-color: rgb(255,205,255);
    }

    .cakeform{
	margin: auto;
    width: 70%;
    border: 3px solid;
    padding: 10px;
	font-size:1.6em;
    }

    .cakedisplay{
	    margin:auto;
    	width:65%;
    }

    h1,p{
    	text-align:center;
    	max-width:100%;
    }

    img{
    	height:150px;
    	width:200px;
	    max-width:100%;
	    cursor: pointer;
	
    }
    .cakedisplay label{
    	display:inline-block;
    	text-align:center;
padding: 20px 68px;
    }

    input[type="radio"]{
    	display:none;
    }

    input[type="radio"]:checked+img{
    	border: 1px solid red;
    }

<!DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
    </style>
    <body>

    <form class="cakeform">
        <div class="cakedisplay">
          <h1>Cake</h1>
    		<label><input type="radio" name="Ctype" value="Sponge Cake"> <img src="img/cake/spongecake.png"><br>Sponge Cake</label>
	    	<label><input type="radio" name="Ctype" value="Cheese Cake"> <img src="img/cake/cheesecake.png"><br>Cheese Cake</label>
	    	<label><input type="radio" name="Ctype" value="Icecream Cake"> <img src="img/cake/icecreamcake.png"><br>Icecream Cake</label>
	    	<label><input type="radio" name="Ctype" value="Mille Crepe"> <img src="img/cake/millecrepe.png"><br>Mille Crepe</label>
		    <br>
	      <button type="button" class="btnNext">Next</button>
        </div>
    
     
      </form>
  
    </script>
    </body>
    </html>

CSS显示单选类型输入

1 个答案: