【问题标题】:CSS - Horizontal Inline AlignmentCSS - 水平内联对齐
【发布时间】:2016-01-12 10:41:31
【问题描述】:

我正在开发一个网站 (http://madworks.fr/suparis/fr/tuniques/14-syakati-tunic.html),我想将“颜色”“尺寸”“qtt”和“添加到购物车”按钮水平对齐在一行上。我尽我所能尝试将显示属性修改为内联或表格单元格,但没有成功。 对于应该与愿望清单图标对齐的社交网络也是如此。 有人可以帮我实现吗?

这里是源代码:

<form id="buy_block" action="http://madworks.fr/suparis/fr/panier" method="post">
            <!-- hidden datas -->
            <p class="hidden">
                <input type="hidden" name="token" value="58dbb67dab473715d793e92ac45eb820">
                <input type="hidden" name="id_product" value="14" id="product_page_product_id">
                <input type="hidden" name="add" value="1">
                <input type="hidden" name="id_product_attribute" id="idCombination" value="68">
            </p>
            <div class="box-info-product">
                                                                                <div class="content_prices clearfix">
                                                <!-- prices -->
                        <div class="price_box clearfix">
                            <p class="our_price_display pull-left" itemprop="offers" itemscope="" itemtype="https://schema.org/Offer"><span id="our_price_display" itemprop="price" content="500">500,00 €</span><meta itemprop="priceCurrency" content="EUR"></p>
                                                            <p id="old_price" class=" hidden pull-left" style="display: none;"><span id="old_price_display" style="display: none;"></span></p>
                                                        </div> <!-- end prices -->




                </div> <!-- end content_prices -->
                <div class="product_attributes clearfix">
                                                <!-- attributes -->
                        <div id="attributes">
                            <div class="clearfix"></div>
                                                                                                        <fieldset class="attribute_fieldset">
                                        <label class="attribute_label" for="group_1">Taille&nbsp;</label>
                                                                                    <div class="attribute_list">
                                                                                                <div class="selector" id="uniform-group_1" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">S</span><select name="group_1" id="group_1" class="form-control attribute_select no-print">
                                                                                                                <option value="1" selected="selected" title="S">S</option>
                                                                                                                <option value="2" title="M">M</option>
                                                                                                        </select></div>
                                                                                        </div> <!-- end attribute_list -->
                                    </fieldset>
                                                                                                                                            <fieldset class="attribute_fieldset">
                                        <label class="attribute_label" for="group_3">Couleur&nbsp;</label>
                                                                                    <div class="attribute_list">
                                                                                                <div class="selector" id="uniform-group_3" style="width: 96px;"><span style="width: 86px; -webkit-user-select: none;">Noir</span><select name="group_3" id="group_3" class="form-control attribute_select no-print">
                                                                                                                <option value="8" title="Blanc">Blanc</option>
                                                                                                                <option value="11" selected="selected" title="Noir">Noir</option>
                                                                                                        </select></div>
                                                                                        </div> <!-- end attribute_list -->
                                    </fieldset>
                                                                                            </div> <!-- end attributes -->



                                            <!-- availability or doesntExist -->
                    <div id="availability_statut" style="display: none;">

                        <span id="availability_value" class=" st-label-warning">This product is no longer in stock</span>
                    </div>
                                            <div id="availability_date" style="display: none;">
                        <span id="availability_date_label">Availability date:</span>
                        <span id="availability_date_value"></span>
                    </div>
                    <!-- Out of stock hook -->
                    <div id="oosHook">

                    </div>


                </div> <!-- end product_attributes -->

                <div class="box-cart-bottom">
                    <!-- quantity wanted -->
                    <div class="qt_cart_box clearfix  ">
                                                    <p id="quantity_wanted_p">
                            <span class="quantity_input_wrap clearfix">
                                <a href="#" data-field-qty="qty" class="product_quantity_down">-</a>
                                <input type="text" min="1" name="qty" id="quantity_wanted" class="text" value="1">
                                <a href="#" data-field-qty="qty" class="product_quantity_up">+</a>
                            </span>
                        </p>

                        <div id="add_to_cart_wrap" class="">
                            <p id="add_to_cart" class="buttons_bottom_block no-print">
                                <button type="submit" name="Submit" class="btn btn-medium btn_primary exclusive">
                                    <span>Add to cart</span>
                                </button>
                            </p>
                        </div>  
                    </div>
                    <!-- minimal quantity wanted -->
                    <p id="minimal_quantity_wanted_p" style="display: none;">
                        The minimum purchase order quantity for the product is <b id="minimal_quantity_label">1</b>
                    </p>

                                        </div> <!-- end box-cart-bottom -->
            </div> <!-- end box-info-product -->
        </form>

【问题讨论】:

  • 欢迎来到 StackOverflow!您应该发布重现问题所需的最少代码,而不仅仅是发布指向您网站的链接。如果链接断开,那么问题对未来的用户来说并非毫无用处。
  • 您也可以发布 CSS 吗?在样式方面,仅提供 HTML 不会有太大帮助。

标签: css alignment


【解决方案1】:

理想情况下,您应该重新排序 HTML,以便 4 个元素位于同一个父元素下,例如:

<div id="attributes">
  <fieldset class="attribute_fieldset"></fieldset>
  <fieldset class="attribute_fieldset"></fieldset>
  <p id="quantity_wanted_p"></p>
  <div id="add_to_cart_wrap"></div>
</div>

他们会有display: inline-block;,根据需要调整任何填充/间距等。

但如果这不可能或太难,你可以用这个 CSS 来做:

.product_attributes, .attribute_fieldset, .box-cart-bottom {
  display: inline-block;
}

你只剩下一些填充和类来调整,直到你把它变成一行。如果您遇到问题,我会参考 CSS 教程并查找诸如填充、显示、浮动等内容。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-03
    • 2010-09-07
    • 2011-05-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多