FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

カートページのコーディング / 要素を横並び

カートページのコーディング / 要素を横並び

chikakoyajima
Shopify Partner
43 0 8

カートページのコーディングをしています。

配送日指定→備考欄→チェックアウトボタン

 

というふうに要素を横並びにしたいのですが、うまくいきません。

何かアドバイスいただけないでしょうか。

 

スクリーンショット 2022-02-19 12.32.20.png

<div class="parent">

{% if section.settings.cart_terms_show %}
<div class="terms rte">
<input type="checkbox" id="terms" />
{% assign terms_url = pages[section.settings.cart_terms_page].url %}
{% capture terms_label_html %}<label for="terms">{{ 'cart.terms.agreement_html' | t: terms_url: terms_url }}</label>{% endcapture %}
{% if section.settings.cart_terms_page == blank %}
{{ terms_label_html | replace: '<a ', '<span ' | replace: '</a>', '</span>' }}
{% else %}
{{ terms_label_html }}
{% endif %}
</div>

{% endif %}

{% if section.settings.show_tax_and_shipping %}
{%- capture taxes_shipping_checkout -%}
{%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- elsif shop.taxes_included -%}
{{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
{%- elsif shop.shipping_policy.body != blank -%}
{{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
{%- else -%}
{{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
{%- endif -%}
{%- endcapture -%}

<div class="cart-policies rte">{{ taxes_shipping_checkout }}</div>
{% endif %}

<input type="submit" class="checkout-btn" name="checkout" value="{{ 'cart.general.checkout' | t | escape }}" />

{% comment %}Paypal and Google checkout buttons{% endcomment %}
{% if section.settings.show_additional_checkout_buttons and additional_checkout_buttons and section.settings.cart_terms_show == false %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}


<div style="width:150px; clear:both">
<label for="datepicker">配達希望日 : </label>
<input id="datepicker" type="text" name="attributes[配達希望日]" value="{{ cart.attributes.date }}" />
</div>

<script>
$("#datepicker").datepicker( {
minDate: '+4D',
maxDate: '+3M',
} );
</script>

{% if section.settings.cart_note_show %}

 <div class="note-area">
<label for="note">{{ 'cart.label.note' | t }}</label>
<textarea id="note" name="note">{{ cart.note }}</textarea>
</div>

</div>

 

CSS→

.parent {
width: 100%;
display: flex;
}
.child {
width: 100px;
}

0件の返信0