0

我正在尝试对使用 App Gini 生成的页面进行样式设置。到目前为止，我已经能够编辑大部分内容，但是我似乎无法让 inline-block 工作，float:left 会工作。但是我尝试了很多方法并且无法浮动到中心，我更喜欢使用内联块。我没有 PHP 编码的背景，主要是 CSS 和 HTML。我正在尝试设置 PHP 元素的样式，但我不相信它们是原因。

PHP 生成指向数据库中表的链接，并根据用户访问进行更改。现在它返回大约 8 个链接，正如我所说，float 允许我将它们格式化为水平显示而不居中，但是当我使用 inline-block 时，它会垂直显示它们并居中。我想要完成的是一个水平居中的菜单，它适应屏幕大小。如果我在这篇文章中缺少任何信息，请告诉我。

CSS：

#headingstyles{font-family: "Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:5px;margin-bottom:0px;}
body{font-family:"Ubuntu","Segoe UI","Segoe WP","Helvetica Neue",'RobotoRegular',sans-serif;font-size:20px}
h1,h2,h3,h4,h5,h6{font-family:"Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:0px;margin-bottom:0px;}

.content a:link {color:#DDD; text-decoration:none;}      
.content a:visited {color:#DDD;text-decoration:none;}  
.content a:hover {color:#FFF;text-decoration:none;}  
.content a:active {color:#FFF;text-decoration:none;} 

.content {
    position:absolute;
    width:99%;
    min-height: 20%;
    padding-top:6%;
    padding: auto;
    background-color: #1569C7;
    color: #FFF;
    text-align: center;
    border-bottom: #111 1px solid;
    margin:0 auto;

}


.content a:link {
    padding: 15px;
    /*display: inline-block;*//*doesn't work*/
    float:left;/*works*/
}
.content a:hover {
    background-color: #479BF9;
}

HTML/PHP：

<div class="content">
<?php
    if(is_array($arrTables)){
        $i=0;
        foreach($arrTables as $tn=>$tc){
            $tChk=array_search($tn, array());
            $searchFirst = (($tChk!==false && $tChk!==null) ? '?Filter_x=1' : '');
            ?>
            <div onclick="window.location='<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>';" id="<?php echo $tn; ?>">
                <a  title="<?php echo htmlspecialchars($tc[1]); ?>" href="<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>">
                    <?php echo (!$i ? "<h2>{$tc[0]}</h2>" : "<h2>{$tc[0]}</h2>"); ?>
                    <?php echo $tc[1]; ?>
                </a>
            </div>

        <?php
            $i++;
        }

        // custom home links, as defined in "hooks/links-home.php"
        if(is_array($homeLinks)){
            $memberInfo = getMemberInfo();
            foreach($homeLinks as $link){
                if(!isset($link['url']) || !isset($link['title'])) continue;
                if($memberInfo['admin'] || @in_array($memberInfo['group'], $link['groups']) || @in_array('*', $link['groups'])){
                    ?>

                    <div onclick="window.location='<?php echo $link['url']; ?>';">
                        <a title="<?php echo htmlspecialchars($link['description']); ?>" href="<?php echo $link['url']; ?>">
                            <h1><?php echo $link['title']; ?></h1>
                            <?php echo $link['description']; ?>
                        </a>
                    </div>

                    <?php
                }
            }
        }

        if(getLoggedAdmin()){
            ?><div onclick="window.location='admin/';"><a href="admin/"><h2><?php echo $Translation['admin area']; ?></h2></a></div><?php
        }
    }else{
        ?><div id="error-no-access"><?php echo $Translation['no table access']; ?><script language="javaScript">setInterval("window.location='index.php?signOut=1'", 2000);</script></div><?php
    }
?>

</div>

生成的 HTML：

<div class="content">

                <div onclick="window.location='t1.php';">
                <a  title="" href="t1.php">
                    <h2>t1</h2>                                         </a>
            </div>

                        <div onclick="window.location='t2.php';">
                <a  title="" href="t2.php">
                    <h2>t2</h2>                                         </a>
            </div>

                        <div onclick="window.location='t3.php';">
                <a  title="" href="t3.php">
                    <h2>t3</h2>                                         </a>
            </div>

                        <div onclick="window.location='t4.php';">
                <a  title="" href="t4.php">
                    <h2>t4</h2>                                         </a>
            </div>

                        <div onclick="window.location='t5.php';">
                <a  title="" href="t5.php">
                    <h2>t5</h2>                                         </a>
            </div>

                        <div onclick="window.location='t6.php';">
                <a  title="" href="t6.php">
                    <h2>t6</h2>                                         </a>
            </div>

                        <div onclick="window.location='t7.php';">
                <a  title="" href="t7.php">
                    <h2>t7</h2>                                         </a>
            </div>

                        <div onclick="window.location='t8.php';">
                <a  title="" href="t8.php">
                    <h2>t8</h2>                                         </a>
            </div>

        <div onclick="window.location='admin/';"><a href="admin/"><h2>Admin Area</h2></a></div>
</div>
4

1 回答 1

0

不要将 inline-block 放在链接上，而是将其放在包含 div 上：

.content div{
  padding: 15px;
  display: inline-block;
}

在上面的代码中，包含的 div 是块，因此将它们的链接设置为 inline-block 没有效果。

于 2013-01-20T19:36:29.053 回答