如何使页脚对齐1行?

时间:2015-07-10 11:10:16

标签: php html css yii

使用Yii框架,我有一个看起来像这样的页脚: enter image description here

使用以下代码:

<div id="footer">
    <div id="footer_left">
        <?php
        $this->widget('zii.widgets.CMenu', array(
            'id'=>'footerID',
            'items' => array(
                array('label'    => 'About', 'id' =>'leftFooter', 'url'  => array('/site/page', 'view' => 'about')),
                array('label'    => 'Help', 'id' =>'MiddleFooter','url'  => array('#')),
                array('label'    => 'Contact', 'id' =>'rightFooter','url'    => array('/site/contact')),
            ),
        ));
        ?>
    </div>
    <div id="footer_right"><?php echo Yii::t('footer', 'Copyright'); ?> &copy; <?php echo date('Y'); ?> <?php echo Yii::t('footer', Yii::t('footer', 'Momentum Technologies Ltd')); ?></div>
</div>
<?php
// no need to access the rights module if user is not logged in yet
//if (Yii::app()->user->isGuest !== true)//TODO && Yii::app()->user->checkAccess(Rights::module()->superuserName))
{
    $translate = Yii::app()->translate;
    echo $translate->dropdown();

    if ($translate->hasMessages())
    {
        echo $translate->translateLink('Translate (newPage)');
        echo $translate->translateDialogLink('Translate(dialog)', 'Translate page title') . ' | ';
    }

    echo $translate->editLink(Yii::t('translatemodule', 'Edit translations page')) . ' | ';
    echo $translate->missingLink('Missing translations page') . '<br/>';
}
?>
<?php ZHtml::commonJsMessage(); ?>
<!-- page -->

我正在尝试使用我的css在一行中获取这些:

#footer
{
    /*padding: 10px;
    margin: 70px -20px;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #C9E0ED;
    background-color: rgb(122, 185, 240);*/
    margin-top: 50px;
    padding: 30px;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #C9E0ED;
}
#footer.ul{
    display: inline-block;
}

结果不成功。你可以帮帮我吗? 我想要/帮助和联系在一行。

3 个答案:

答案 0 :(得分:1)

您不应将#footer.ul设置为内联块本身。

您要做的是将列表项本身设置为内联块或内联块:

#footer ul li {
    display: inline-block;
}

答案 1 :(得分:1)

如果它正在生成无序列表,那么该样式应该应用于li。应该是 -

#footer ul li{
    display: inline-block;
}

答案 2 :(得分:1)

将此代码添加到您的css文件 -

#footer ul li {
    display: inline;
}