在同一行上对齐元素

我正在尝试创建一个自定义单选按钮，有时候这些按钮将会是图像，有时还会伪造背景颜色。在同一行上对齐元素

这是我的时刻：

HTML

<div class="radio-inline radio-img"> 
    <input type="radio" name="cat" id="cat1" /> 
    <label for="cat1"> 
    <img src="//placekitten.com/150/150" /> 
    </label> 
</div> 

<div class="radio-inline radio-img"> 
    <input type="radio" name="cat" id="cat2" /> 
    <label for="cat2"> 
    <img src="//placekitten.com/151/151" /> 
    </label> 
</div> 

<div class="radio-inline radio-color"> 
    <input type="radio" name="cat" id="cat3" /> 
    <label for="cat3"> 
    <span></span> 
    </label> 
</div>

CSS

input[type="radio"] + label span { 
    display: inline-block; 
    width: 48px; 
    height: 48px; 
    vertical-align: middle; 
    text-align: center; 
    cursor: pointer; 
} 

input[type="radio"] + label span { 
    background-color: #292321; 
} 

input[type="radio"]:checked + label span:before { 
    content: '\2714'; 
    color: #fff; 
    padding: 5px 
}

http://codepen.io/anon/pen/GmNEvM

我做不到弄清楚如何对齐这两种类型！我怎样才能做到这一点？

谢谢！

来源

2017-04-25 Trxplz0

只是一句话：在你codepen你拼错'位置：absolute'在过去的CSS规则。如果你改正这一点，整个事情变得有点混乱... – Johannes

默认情况下，内联块元素自己对齐到baseline。使用vertical-align: middle;作为div。

.radio-inline { 
    display: inline-block; 
    margin-right: 20px; 
    vertical-align: middle; 
}

预览

前瞻：http://codepen.io/anon/pen/aWByaE

来源

2017-04-25 20:50:23

谢谢，有没有办法将它设置为相同的宽度和高度，我使用填充，因为它是一种背景颜色，没有内容 – Trxplz0

@ Trxplz0使用高度和宽度。 –

结帐这样的：http://codepen.io/anon/pen/YVpxmg

input[type=radio] + label>span { 
    display: inline-block; 
    background: red; 
    width: 68px; 
    height: 68px; 
}

您可以将任何元素的display设置为block或inline-block并设置该元素的宽度和高度！

我已更新codepen以反映更改。

来源

2017-04-25 21:10:38 darham

谢谢先生！ – Trxplz0

垂直对齐它的方式你喜欢因为他们是内联块。并在第三个框中的跨度块元素。见下面

.radio-inline { 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
    vertical-align: top;/**Added*/ 
 
} 
 

 
input[type=radio] { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 

 
input[type=radio]:checked + label>img, input[type=radio]:checked + label>span { 
 
    box-shadow: 0 0 3px 3px #000; 
 
} 
 

 
input[type=radio] + label>img { 
 
    width: 68px; 
 
    height: 68px; 
 
    transition: 250ms all; 
 
} 
 

 
input[type=radio] + label>span { 
 
    position: absoltue; 
 
    background: red; 
 
    top: -20px; 
 
    left: 0; 
 
    padding-right: 34px; 
 
    padding-left: 34px; 
 
    padding-top: 34px; 
 
    padding-bottom: 34px; 
 
    display: block;/**Added*/ 
 
}

<div class="radio-inline radio-img"> 
 
    <input type="radio" name="cat" id="cat1" /> 
 
    <label for="cat1"> 
 
    <img src="//placekitten.com/150/150" /> 
 
    </label> 
 
</div> 
 

 
<div class="radio-inline radio-img"> 
 
    <input type="radio" name="cat" id="cat2" /> 
 
    <label for="cat2"> 
 
    <img src="//placekitten.com/151/151" /> 
 
    </label> 
 
</div> 
 

 
<div class="radio-inline radio-color"> 
 
    <input type="radio" name="cat" id="cat3" /> 
 
    <label for="cat3"> 
 
    <span></span> 
 
    </label> 
 
</div>

来源

2017-04-25 21:13:02 blecaf

在同一行上对齐元素

回答

相关问题