静的ページは機能しますが、PHPに入ればCSSは正しく表示されません

Question

HTMLファイルに次のコードがあります。これにより、スタイル付きリストが作成されます。

<style> 
/* LIST #8 */ 
#list8 { } 
#list8 ul { list-style:none; } 
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; } 
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; 
    text-decoration:none; color:#bfe1f1; } 
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; 
    -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000; 
    transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; } 
</style> 
<div id="list8"> 
    <ul> 
     <li><a href="#">9th Fall 2017</a></li> 
     <li><a href="#">10th Spring 2018</a></li> 
    </ul> 
</div> 

これは、HTMLファイルのレンダリング方法です。

私は、次のPHPファイルを持っています。

<?php 
$link = mysqli_connect("localhost", "root", "password", "Booking_Databse"); 

/* check connection */ 
if (mysqli_connect_errno()) { 
    printf("Connect failed: %s\n", mysqli_connect_error()); 
    exit(); 
} 

$query = "SELECT SemesterName FROM Semester_tbl"; 

if ($result = mysqli_query($link, $query)) { 
?> 
<style> 
/* LIST #8 */ 
#list8 { } 
#list8 ul { list-style:none; } 
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; } 
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; 
    text-decoration:none; color:#bfe1f1; } 
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; 
    -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000; 
    transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; } 
</style> 
<div id="list8"> 
    <ul> 
    </ul><?php 
    /* fetch associative array */ 
    while ($row = mysqli_fetch_row($result)) { 
     echo '<li><a href="#">' . $row[0] . '</a></li>'; 

    } 
    ?> 
    </ul> 
</div> 
    <?php 

    /* free result set */ 
    mysqli_free_result($result); 
} 

/* close connection */ 
mysqli_close($link); 
?> 

これは、PHPファイルのレンダリング方法です：

私はPHPファイルは、HTMLファイルのようにレンダリングします。私は何が間違っているのか分からない。

Answer 1

あなたは<ul> ...

参照ループを実行する前に、あなたのクローズ：

<div id="list8"> 
    <ul> 
    </ul><?php 
    /* fetch associative array */ 
    while ($row = mysqli_fetch_row($result)) { 
     echo '<li><a href="#">' . $row[0] . '</a></li>'; 

    } 
    ?> 
    </ul> 
</div> 

変更するには：

<div id="list8"> 
    <ul> 
    <?php 
    /* fetch associative array */ 
    while ($row = mysqli_fetch_row($result)) { 
     echo '<li><a href="#">' . $row[0] . '</a></li>'; 

    } 
    ?> 
    </ul> 
</div> 

Answer 2

あなたがループ

</ul><?php // <------------------------------- This </ul> shouldn't be here 
/* fetch associative array */ 
while ($row = mysqli_fetch_row($result)) { 
    echo '<li><a href="#">' . $row[0] . '</a></li>'; 

} 
?> 
</ul> 

前 </ul>を閉じます

Answer 3

<div id="list8"> 
    <ul> 
    <?php 
    /* fetch associative array */ 
    while ($row = mysqli_fetch_row($result)) { 
     echo '<li><a href="#">' . $row[0] . '</a></li>'; 

    } 
    ?> 
    </ul> 
</div>