Как установить кнопки Facebook и Twitter рядом друг с другом?

Я пытался решить это в течение 5 часов, и ничего не работает. У меня есть кнопка Facebook и кнопка Twitter, и я хочу, чтобы они были рядом, но кнопка Twitter продолжает появляться на линии внизу. Я использую Twitter Boostrap. Это мой Haml код:Как установить кнопки Facebook и Twitter рядом друг с другом?

#social-media-container.container 
%ul.social-media-buttons 
    %span.span3.offset2 
     %li.socialmedia 
      %h3 Like us on Facebook 
      .facebook-like-button 
      %script{:src => "http://connect.facebook.net/en_US/all.js#xfbml=1"} 
      %fb:like{:layout => "button_count", :show_faces => "false", :width => "100"} 
%ul.social-media-buttons 
    %span.span3.offset6 
     %li.socialmedia 
      %h3 Follow us on Twitter 
      %a.twitter-follow-button{"data-count" => "horizontal", :href => "https://twitter.com/..."}Follow ... 
      %script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}

И мой CSS код:

.social-media-buttons{ 
float: left; 
list-style: none; 
margin: 5px 0 20px 0; 
padding: 0; 
width: 100%;

}

ul.social-media-buttons li{ 
    display: block; 
    float: left; 
    margin-right: 10px; 
} 
twitter-follow-button{ 
    margin-top: 2px; 
}

Любая идея, как это исправить? Я также пробовал несколько других способов отображения: inline; но безрезультатно.

источник

2012-04-30 Anoel

@Anoel: Почему у вас есть срок оберточной элемент списка в списке '.social-медиа-buttons'? – sarcastyx

Пролет был там, чтобы попытаться компенсировать их по направлению к центру. Они были там, прежде чем я переключил его на улицу, и я не думал об этом. – Anoel

Есть несколько ошибок с кодом HAML. Для начала вы создаете пустой div. Я предполагаю, что вы хотите, чтобы div работал как обертка для неупорядоченного списка .social-media-buttons. В этом случае ваш HAML должен выглядеть следующим образом:

#social-media-container.container 
    %ul.social-media-buttons 
     %li.socialmedia 
      %h3 Like us on Facebook 
      .facebook-like-button 
      %script{:src => "http://connect.facebook.net/en_US/all.js#xfbml=1"} 
      %fb:like{:layout => "button_count", :show_faces => "false", :width => "100"} 
     %li.socialmedia 
      %h3 Follow us on Twitter 
      %a.twitter-follow-button{"data-count" => "horizontal", :href => "https://twitter.com/..."}Follow ... 
      %script{:src => "http://platform.twitter.com/widgets.js", :type => "text/javascript"}

Что это делает это создает div в качестве оболочки для маркированного списка одинsocial-media-buttons. В вашем коде HAML у вас было два неупорядоченных списка. Один для Facebook и еще один для Twitter. Я также удалил ненужный span, который обертывал li. Наличие объекта span недействительным HTML-кодом. Если вы хотите стилизовать содержимое внутри элементов списка, я бы предложил добавить стили для заголовков, div или тегов внутри элементов списка.

Попробуйте этот код и проверьте, не устраняет проблему.

источник

2012-04-30 01:45:45 sarcastyx

Спасибо! Я изменил его на это, а затем добавил .offset3 в .social-media-кнопки, и он работал, чтобы сосредоточить его. – Anoel

. Помимо span, обертывание ваших элементов списка (предполагается, что оно обертывает блок списка), вы компенсируете свою кнопку Twitter из той же строки, что и кнопка facebook, поэтому просто удалите это смещение, и обе кнопки должны выровняться просто хорошо.

Un-Haml'd Демо: http://jsfiddle.net/mJ3BV/1/

источник

2012-04-30 01:53:20

Как установить кнопки Facebook и Twitter рядом друг с другом?

ответ

Смежные вопросы