在区域中水平显示微件

时间：2013-09-20 作者：streetfire

我正在构建一个自定义bootstrap 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>\',
    ) );
}

1 个回复
最合适的回答,由SO网友:random_user_name 整理而成

你要找的是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;
}

结束
标签： widgets   小码农  

相关推荐

在WordPress管理员中，我如何才能找到哪个页面(hemes.php、widgets.php等)？我上场了吗？

在Wordpress管理中，如何通过编程找出哪个页面(themes.php, widgets.php, 等等）我在吗？