Widgets horizontal im Bereich anzeigen

Ich erstelle ein benutzerdefiniertes Bootstrap 3-Theme. Ich habe einen neuen Widget-Bereich für meine Kopfzeile erstellt und versuche, die Widgets dort horizontal anzuzeigen, in der Zeile. Ich habe mehrere Tutorials angeschaut, aber keine scheint zu funktionieren. Kann jemand helfen?

**Here is my CSS for the list:** #top-widget-container ul { list-style-type: none; } #top-widget-container ul li { display: inline; } **And my functions.php widget insert** add_action( 'widgets_init', 'add_header_widget' ); function add_header_widget() { register_sidebar( array( 'name' => 'Header Widget Area', 'id' => 'header_widget', 'before_widget' => '
  • ', 'after_widget' => '
  • ', 'before_title' => '

    ', 'after_title' => '

    ', ) ); }

    Solutions Collecting From Web of "Widgets horizontal im Bereich anzeigen"

    Sie suchen entweder float oder inline-block . Aus verschiedenen Gründen bevorzuge ich inline-block :

     #top-widget-container ul > li { display: inline-block; /* Next two lines make IE7 behave */ zoom: 1; *display: inline; /* Adjust width to the appropriate size for your theme */ width: 250px; /* Presumably you want all the widgets to align-top */ vertical-align: top; } 

    Beachten Sie, dass ich den Selektor “direkter Nachfolger” verwendet habe (alias Child-Kombinator-Selektor oder direkt untergeordnetes Element): ul > li – auf diese Weise erhalten Unterlisten nicht dieselbe Formatierung (was zu allen möglichen Problemen führen kann). Dieser Selektor wird in modernen Browsern, IE8 + und IE7 (normalerweise) unterstützt.

    Alternativ kann die Float-Technik (mag es auch nicht, wird aber funktionieren):

     #top-widget-container ul { list-style-type: none; /* Next two lines ensure the container clears the floats */ width: 100%; overflow: hidden; } #top-widget-container ul > li { display: block; /* Adjust width to the appropriate size for your theme */ width: 250px; }