Question

我有一个脚本，可以从mysql查询中获得9个结果。然后我将php中的结果添加到$ show_status。当我输出结果时，我无法将它们全部集中在一起？

我打印结果如下：

<div class="col-md-4 centered">Latest news<?echo $show_status ?></div>

最新消息是居中的，但$ show_status结果在左边？

获得结果的代码是

<?

include 'db.php';
$result = mysqli_query($con,'SELECT * FROM status ORDER BY id desc LIMIT 9');

$date = array();
$person = array();
$type = array();
$status = array();
while($row = mysqli_fetch_array($result)) {

    $date[] = $row['date']; 
    $person[] = $row['person'];
    $type[] = $row['type'];
    $status[] = $row['status'];

    }


$show_status = "<div style='height: 88px;' id='news-container'>
<ul style='padding: 0pt; top: 0px;'>

<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
<div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[1] $type[1]</span><BR>$person[1] $status[1]<BR>
            </div>
        </li>

        <li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
<div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[2] $type[2]</span><BR>$person[2] $status[2]<BR>
            </div>
        </li>

    <li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[3] $type[3]</span><BR>$person[3] $status[3]<BR>
            </div>
        </li><li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px; display: list-item;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[4] $type[4]</span><BR>$person[4] $status[4]<BR>
            </div>
        </li><li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[5] $type[5]</span><BR>$person[5] $status[5]<BR>
            </div>
        </li>
<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[6] $type[6]</span><BR>$person[6] $status[6]<BR>
            </div>
        </li>
<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[7] $type[7]</span><BR>$person[7] $status[7]<BR>
            </div>
        </li>
<li style='margin: 0pt; padding: 0pt; height: 58px; font-size:10px;'>
            <div>
<span style='font-size: 14px !important; color: #333638 !important;'>$date[8] $type[8]</span><BR>$person[8] $status[8]<BR>
            </div>
        </li>       

        </ul>
</div>";

?>

，CSS是：

#news-container
{
    width: auto; 
    margin: 0;
    margin-top: 5px;
    height: auto;
    border: 0px solid #ffffff;
    text-align:center;
}

#news-container ul li div
{
    width: auto; 
    border: 0px solid #a8a7a7;
    background: #a8a7a7;
    margin: 0;
    padding:0;
}

在此先感谢，它正在努力！

Answer 1

我可以建议以下代码更改吗？我把你的陈述改成了一个循环，这样它们就是精确的副本 - 更容易以这种方式维护，而且更难以简单地排版。

我还拿出了你的内嵌CSS，并将它们放在<style></style>元素中，但如果可能的话，我建议将其添加到CSS样式表中。

我还使用Heredocs而不是双引号字符串，因为它允许您在HTML元素中使用双引号而不转义它们。

CSS：

<style>
    span {
         margin:auto;
         font-size:12px !important;
         color: #333638 !important;
    }
    #news-container {
          margin:auto;
          font-size:14px !important;
          text-align: center;
     }

     .centered{
          margin:auto; 
          text-align:center;
     }
</style>

PHP：

<?
    include 'db.php';
    $result     = mysqli_query($con, 'SELECT * FROM status ORDER BY id desc LIMIT 9');
    $liElements = "";
    while ($row = mysqli_fetch_array($result)) {
        $liElements .= <<<ELEMENT
            <li class="no-padding">
                <span>{$row['date']} {$row['type']}</span><br>
                {$row['person']} {$row['status']}
            </li>
ELEMENT;
    }
    $show_status = <<<NEWSCONTAINER
    <div class="no-padding" id="news-container">
        <ul class="no-padding">
            {$liElements}
        </ul>
    </div>
NEWSCONTAINER;
?>

Answer 2

感谢您的帮助，我在添加

时就开始工作了

span {
        margin:auto;
        font-size:12px !important;
        color: #333638 !important;
    }
    #news-container {
        margin:auto;
        font-size:14px !important;
        text-align: center;
    }

    .centered{margin:auto; text-align:center;}

那和来自GrumpyCrouton的代码似乎已经完成了这个技巧，而不是

我不能把div的内容集中在一起

2 个答案: