CSS inline-block不能工作,但是float可以


CSS inline-block won't work but float will when styling a PHP element

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

PHP生成到数据库中的表的链接,它根据用户访问而改变。现在它返回大约8个链接,正如我所说的浮动允许我将它们设置为水平显示而不居中,但是当我使用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>

与其把inline-block放在链接上,不如把它放在包含链接的div上:

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

在上面的代码中,包含div的是块,因此将它们的链接设置为inline-block不会产生任何影响。

相关文章: