如何让我的页脚保持在同一条线上

时间:2014-03-13 07:31:34

标签: css shopify

我有一个shoppify网站,页脚显示"快速链接" "关注我们"和#34;时事通讯"但我希望他们所有人都在同一页上,但是时事通讯继续下一行。这是代码。

<div class="clearfix">
      {% if settings.enable_social_links %}
        <h4>{{ settings.footer_social_title }}</h4>
        {% if settings.twitter_link != '' %}<a href="{{ settings.twitter_link }}" title="{{ shop.name }} on Twitter" class="icon-social twitter">Twitter</a>{% endif %}
        {% if settings.facebook_link != '' %}<a href="{{ settings.facebook_link }}" title="{{ shop.name }} on Facebook" class="icon-social facebook">Facebook</a>{% endif %}
        {% if settings.youtube_link != '' %}<a href="{{ settings.youtube_link }}" title="{{ shop.name }} on YouTube" class="icon-social youtube">YouTube</a>{% endif %}
        {% if settings.atom_link != '' %}<a href="{{ settings.atom_link }}" title="{{ shop.name }} news" class="icon-social atom">Blog feed</a>{% endif %}
        {% if settings.instagram_link != '' %}<a href="{{ settings.instagram_link }}" title="{{ shop.name }} on Instagram" class="icon-social instagram">Instagram</a>{% endif %}
        {% if settings.pinterest_link != '' %}<a href="{{ settings.pinterest_link }}" title="{{ shop.name }} on Pinterest" class="icon-social pinterest">Pinterest</a>{% endif %}
        {% if settings.vimeo_link != '' %}<a href="{{ settings.vimeo_link }}" title="{{ shop.name }} on Vimeo" class="icon-social vimeo">Vimeo</a>{% endif %}
        {% if settings.tumblr_link != '' %}<a href="{{ settings.tumblr_link }}" title="{{ shop.name }} on Tumblr" class="icon-social tumblr">Tumblr</a>{% endif %}
        {% if settings.google_link != '' %}<a href="{{ settings.google_link }}" title="{{ shop.name }} on Google+" class="icon-social google">Google+</a>{% endif %}
      {% endif %}
        </div>

        <div class="span4">
      {% if settings.footer_display_newsletter %}
      <div class="p30">
        <h4>{{ settings.footer_newsletter_title }}</h4>
        <form action="{{ settings.mailing_list_form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
          <input type="email" value="" placeholder="Email Address" name="EMAIL" id="mail" /><input type="submit" class="btn newsletter" value="Subscribe" name="subscribe" id="subscribe" />
        </form>
      </div>
      {% endif %}
      </div>

    </div>

1 个答案:

答案 0 :(得分:0)

要将元素保持在同一行,请将它们作为内联块。

.p30, .p30 * { display: inline-block }