CSS内联块不起作用，但在设置PHP元素样式时将浮动

Question

I'm trying to style a page generated with App Gini. I've been able to edit most everything so far, however I can't seem to get inline-block to work, float:left will work. However I've tried many methods and can't get float to center and I much prefer using inline-block. I have no background in PHP coding mostly just CSS and HTML.I'm trying to style PHP elements and I don't believe they're the cause.

The PHP generate links to tables within a database and it changes based on user access. Right now it returns about 8 links and as I said float allows me to format them to display horizontally without centering however when I use inline-block it displays them vertically with centering. What I'm trying to accomplish is a horizontal centered menu that is adaptive to screen size. If there is any information I am lacking in this post please let me know.

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

The 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>

The Generated 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>

Answer 1

Instead of putting inline-block on the links, put it on their containing divs instead:

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

In your code above, the containing divs are blocks so setting their links to inline-block doesn't have an effect.