0

App Gini で生成されたページのスタイルを設定しようとしています。これまでのところ、ほとんどすべてを編集できましたが、インライン ブロックを機能させることができないようです。float:left は機能します。しかし、私は多くの方法を試しましたが、フロートを中央に置くことができず、インラインブロックを使用することを好みます。私は PHP コーディングのバックグラウンドがなく、主に CSS と HTML だけです。PHP 要素のスタイルを設定しようとしていますが、それが原因だとは思いません。

PHP はデータベース内のテーブルへのリンクを生成し、ユーザー アクセスに基づいて変更します。現在、約 8 つのリンクが返されます。フロートを使用すると、中央揃えせずに水平方向に表示するようにフォーマットできますが、インライン ブロックを使用すると、中央揃えで垂直方向に表示されます。私が達成しようとしているのは、画面サイズに適応する水平中央のメニューです。この投稿に不足している情報がある場合は、お知らせください。

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

リンクにインラインブロックを配置する代わりに、リンクを含むdivに配置します。

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

上記のコードでは、含まれているdivはブロックであるため、それらのリンクをinline-blockに設定しても効果はありません。

于 2013-01-20T19:36:29.053 に答える