Отображать виджетов по горизонтали в области

Я создаю пользовательскую загрузочную тему 3. Я создал новую область виджета для своего заголовка и пытаюсь отобразить там виджеты горизонтально, в строке. Я просмотрел несколько руководств, но никто, кажется, не работает. Может ли кто-нибудь помочь?

**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' => '<li id="top-widget-container ul li">', 'after_widget' => '</li>', 'before_title' => '<h2 class="rounded">', 'after_title' => '</h2>', ) ); } 

Solutions Collecting From Web of "Отображать виджетов по горизонтали в области"

Вы ищете либо float либо inline-block . По ряду причин я предпочитаю 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; } 

Обратите внимание, что я использовал селектор «прямой потомок» (он же селектор дочерних комбинаторов или непосредственный ребенок): ul > li – таким образом, любые подписи не получают такого же форматирования (что может вызвать всевозможные проблемы). Этот селектор поддерживается в современных браузерах, IE8 + и IE7 (обычно).

Альтернативно, поплавковая техника (тоже не нравится, но будет работать):

 #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; }