html - 将文本对齐到按钮 radio 的右侧

标签 html css flexbox

我有一个主题,下面有这个部分,我想对齐单选按钮右侧的文本,现在它在单选按钮下方

这是我想要的:enter image description here

这是 jsfiddle:http://jsfiddle.net/Mwanitete/Jm2JR/181/

   <div class="delivery_options">
        <div class="delivery_option item" style="margin: 0px;padding: 0px;">
            <div>
                <label class="delivery-option-label" for="delivery_option_13687_0">
                    <div class="resume div div-bordered">
                        <div>
                            <div class="delivery_option_radio">
                                <input id="delivery_option_13687_0" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="233," data-id_address="13687" value="233,">
                            </div>

                            <div class="delivery_option_logo">
                            </div>

                            <div>
                                Kurier DHL (2-5dni roboczych)

                                <span class="delivery_option_price">
                                                                                                                                                    12,00 zł
                                                                                                                    </span>

                                <br>
                                <span class="best_grade best_grade_speed">The fastest</span>
                            </div>

                        </div>
                    </div>
                </label>
            </div>
        </div>
        <!-- end delivery_option -->
        <div class="delivery_option alternate_item" style="margin: 0px; padding: 0px; float: none;">
            <div>
                <label class="delivery-option-label" for="delivery_option_13687_1">
                    <div class="resume div div-bordered">
                        <div>
                            <div class="delivery_option_radio">
                                <input id="delivery_option_13687_1" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="234," data-id_address="13687" value="234,">
                            </div>

                            <div class="delivery_option_logo">
                            </div>

                            <div>
                                Kurier DHL - pobranie (2-5 dni roboczych)

                                <span class="delivery_option_price">
                                                                                                                                                    12,00 zł
                                                                                                                    </span>

                                <br>
                            </div>

                        </div>
                    </div>
                </label>
            </div>
        </div>
        <!-- end delivery_option -->
        <div class="delivery_option item" style="margin: 0px; padding: 0px; float: none;">
            <div>
                <label class="delivery-option-label" for="delivery_option_13687_2">
                    <div class="resume div div-bordered">
                        <div>
                            <div class="delivery_option_radio">
                                <input id="delivery_option_13687_2" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="235," data-id_address="13687" value="235,">
                            </div>

                            <div class="delivery_option_logo">
                            </div>

                            <div>
                                Odbiór osobisty - Showroom - Mokotowska 40/3, Warszawa (2-3 dni roboczych)

                                <span class="delivery_option_price">
                                                            Free
                                            </span>

                                <br>
                                <span class="best_grade best_grade_price">The best price</span>
                            </div>

                        </div>
                    </div>
                </label>
            </div>
        </div>
        <!-- end delivery_option -->
        <div class="delivery_option alternate_item" style="margin: 0px; padding: 0px; float: none;">
            <div>
                <label class="delivery-option-label" for="delivery_option_13687_3">
                    <div class="resume div div-bordered">
                        <div>
                            <div class="delivery_option_radio">
                                <input id="delivery_option_13687_3" class="delivery_option_radio" type="radio" name="delivery_option[13687]" data-key="231," data-id_address="13687" value="231," checked="checked">
                            </div>

                            <div class="delivery_option_logo">
                            </div>

                            <div>
                                Odbiór osobisty - Sklep - Stary Browar, Poznań (2-5 dni roboczych)

                                <span class="delivery_option_price">
                                                            Free
                                            </span>

                                <br>
                            </div>

                        </div>
                    </div>
                </label>
            </div>
        </div>
        <!-- end delivery_option -->
    </div>

我尝试使用 float 但没有用,任何想法或帮助,建议将不胜感激,请帮助

最佳答案

将这一行添加到你的 CSS 中

.resume > div {
   display: flex;
}

关于html - 将文本对齐到按钮 radio 的右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52249268/

相关文章:

c# - 如何将 ASP.NET MVC 中的 HTML <select> 多个属性的更新值插入到数据库?

javascript - 将填充应用于段落的最后一行

javascript - 如何显示进度图标直到所选图像完全加载?

html - 没有 pos 的垂直居中图像 :absolute inside pos:relative

jquery - 如何使用 jQuery 删除周围的 DIV?

html - Bootstrap 4 - 更改移动设备中 5 列布局的顺序

html - 在剩余空间中水平居中最大宽度的 flexbox 元素

css - 简单的 CSS 帮助

html - 什么是清除修复?

javascript - 从数组内的数组获取数据未按预期工作