时间戳

首页 > 解决方案 > 如何在带有信用卡图标的单选按钮上应用 flexbox 样式？

html - 如何在带有信用卡图标的单选按钮上应用 flexbox 样式？

问题描述

我是 Web 开发的初学者，我正在做一个项目，我有一个付款表格，我必须选择使用哪张信用卡付款。我的表单内的按钮旁边有 3 个带有信用卡图标的单选按钮。我想要的是通过我的支付表单中的 flexbox 将 3 个选项连续显示，彼此之间有空格。但是，当我在我的网页中应用我的代码时，我会在每张卡片上方获得单选按钮，并且我希望它们的格式为：单选按钮卡片（按钮旁边的卡片未按下）。我希望您能帮助我解决问题这个问题 。我的代码：

.pay-container{

position:relative;
left:50%;
margin-top:400px;
transform:translate(-50%,-50%);
width:500px;
height:400px;
box-sizing:border-box;	
background:rgb(0,0,0,0.5);
padding:40px;		
	
}	

.pay-container input,select{

margin-bottom:20px;
width:100%;	
	
	
}	


.pay-container input[type=text]
{

border:none;
border-bottom:1px solid #ccc;
outline:none;
height:30px;
color:#ffffff;
display:16px;
	
	
}


.pay-container select{
	
margin-top:20px;
padding:10px 0;
	
	
}	

.card-container{
	
display:flex;
justify-content:flex-start;	
	
}	

.card-container > div{

display:inline-block;
width:100px;
margin:10px;
	
	
}	
<div class = "pay-container">
    
 <form class = "pay">
	
	<label for "Firstname"> First Name </label>
	<input type = "text" name = "fname" id = "first" required>
	
	<label for "Lastname"> Last  Name </label>
	<input type = "text" name = "sname" id = "last" required>
		
    <label for "credit-card"> Choose a card </label><br/>

	<div class = "card-container">
	   
      <div><input type = "radio" name = "card"><a href="http://www.credit-card-logos.com/"><img alt="Credit Card Logos" title="Credit Card Logos" src="http://www.credit-card-logos.com/images/discover_credit-card-logos/discover_logo_1.gif" width="57" height="36" border="0" /></a></div>
      <div><input type = "radio" name = "card"><a href="http://www.credit-card-logos.com/"><img alt="Credit Card Logos" title="Credit Card Logos" src="http://www.credit-card-logos.com/images/mastercard_credit-card-logos/mastercard_logo_4.gif" width="57 height="20" border="0" /></a></div>
      <div><input type = "radio" name = "card"><a href="http://www.credit-card-logos.com/"><img alt="Credit Card Logos" title="Credit Card Logos" src="http://www.credit-card-logos.com/images/visa_credit-card-logos/visa_logo_2.gif" width="57" height="36" border="0" /></a></div>
	
	</div>
	
	
	
 </form>

 
 </div>

标签： htmlcss

解决方案

改变风格，如：

.card-container > div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3em;
    width:100px;
    margin:10px;
}

推荐阅读