javascript - 使用单选按钮在面板中对齐

Question

我正在使用它来显示多个产品并使其正常工作，除了我试图让我的副标题与它上面的产品标题对齐。

我希望标题在第一行，子标题在第二行，但不希望子标题在单选按钮下方换行。

还希望将面板标题行的单选按钮垂直居中。

<div class="pull-right">
    Some image or <br />
    images will go <br />
    over here.
</div>
<div class="panel-group pull-left" id="products">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber1">
            <h4 class="panel-title">
                <div>
                    <input type="radio" name="specs"> Some Product Title #1<br />
                        Some Product Subtitle
                </div>
            </h4>
        </div>
        <div id="partnumber1" class="panel-collapse collapse">
             <div class="list-group">
                 <ul class="list-group">
                     <li class="list-group-item">Some product data</li>
                     <li class="list-group-item">Some product data</li>
                </ul>
             </div>
        </div>
        <div class="panel-heading" data-toggle="collapse" data-parent="#products" href="#partnumber2">
            <h4 class="panel-title">
                <div>
                    <input type="radio" name="specs"> Some Product Title #2 <br />
                        Some Product Subtitle
                </div>
            </h4>
        </div>
        <div id="partnumber2" class="panel-collapse collapse">
             <div class="list-group">
                 <ul class="list-group">
                     <li class="list-group-item">Some product data</li>
                     <li class="list-group-item">Some product data</li>
                </ul>
             </div>
        </div>
    </div>
</div>

https://jsfiddle.net/blaine109/um7m89hp/

Answer 1

我建议您为单选按钮使用绝对位置 link .如果你只支持现代浏览器，你可以使用

transform: translateY(-50%)

代替

margin-top: -6px; // half of the height of the radio button