2016-04-15 65 views
-2

形勢如何定位使用CSS頁面各處複選框(複選框值從數據庫填充)

我在CSS一個絕對的初學者,因此我有問題,想你的幫助。 我已經創建了一個複選框列表,但是複選框的值是使用存儲在mysql數據庫中的值填充的。 的複選框的PHP代碼如下所示:

<?php 

require("user_connection.php"); 


$q = mysqli_query($connect, "SELECT * FROM `campus`"); 
    while ($line = mysqli_fetch_assoc($q)) { 
    echo '<input type="checkbox" name="car" 
      value="'.$line['room'].'">'.$line['room'].'</br>'; 
    } 

?> 


</br> 
</br> 



<?php 
$q = mysqli_query($connect, "SELECT * FROM `campus_two`"); 
    while ($line = mysqli_fetch_assoc($q)) { 
    echo '<input type="checkbox" name="car" 
      value="'.$line['room'].'">'.$line['room'].'</br>'; 
    } 

?> 


<div id="next"><input type="submit" name="next" Value="next"/></div> 
</form> 

問題

我只是希望能夠在複選框周圍放置我的網站的中間。網上似乎有很多關於如何輕鬆使用CSS的教程,但所有這些教程都將複選框值嵌入到HTML中,而不是像使用數據庫那樣動態生成。

目前我的CSS看起來像這樣

label { 
    position: absolute; 
    top: 300px; 
    right: 700px; 
} 
input { 
    position: absolute; 
    top: 300px; 
    right: 700px; 
} 

現在這個工程上嵌入到HTML值正常的複選框罰款,但使用從數據庫值生成我的複選框。我希望能夠在我的網站中定位複選框,你們知道我可以如何解決這個問題嗎?

+0

我們需要看看你想如何看待...否則我們只是猜測。 –

+0

我不希望它看起來像任何東西,我只是想要它,但我希望能夠將其定位在我的網站中間 –

+0

你對這個問題的核心假設是錯誤的。您的數據庫正在生成靜態HTML,您可以通過查看頁面的源代碼來查看。靜態複選框和動態生成的檢查之間沒有區別。如果您的CSS適用於您的靜態HTML,那麼您將以錯誤的方式生成HTML。您的代碼看起來像會覆蓋屏幕上某個位置的所有元素。 –

回答

0

不要過度去想。 PHP在這裏創建html。

<div id="next"><input type="submit" name="next" Value="next"/></div> 

echo '<input type="checkbox" name="car" value="'.$line['room'].'">'.$line['room'].'</br>'; 

第二被動態創建。即使這是用PHP動態創建的頁面呈現後,你有一個頁面使用CSS甚至JS工作。

比方說您要添加big-btn類在PHP很容易只是這樣做

<div id="next" class="big-btn"><input type="submit" name="next" Value="next"/></div> 

在樣式表

.big-btn{ 
    height: 50px; 
    width: 50px; 
} 

CSS將是一個更大的按鈕。

儘管這很簡單。你可以用HTML來做到這一點。

<?php 
    $q = mysqli_query($connect, "SELECT * FROM `campus_two`"); 
    while ($line = mysqli_fetch_assoc($q)) { 
     echo '<input type="checkbox" name="car" 
     value="'.$line['room'].'">'.$line['room'].'</br>'; 
    } 
?> 

在這種情況下,你可以有1個輸入或80只取決於什麼:就像你在這裏的服務器端渲染,如PHP,甚至在某種意義上更強大,你可以查詢數據的基礎上建立自己的輸入被返回,但它將被呈現爲可以被設置爲完全相同的HTML。另一個好處是,你可以在數據庫中設置標誌並有條件地添加類或標識來真正建立一個動態頁面,但是一旦它被呈現(在JS之外),頁面就是靜態的HTML。

+0

謝謝你的幫助,我現在明白了 –