不同的瀏覽器HTML對齊

我有我設計的搜索引擎網站的首頁我在網站建設期間在Chrome中使用它。不同的瀏覽器HTML對齊

我剛剛在Firefox和IE中測試過該網站，並且收音機框和搜索框/按鈕左對齊，這不是我希望如何顯示它的方式。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<meta name="view-part" content="width=device-width, inital-scale =1.0"> 
<title> Clear Shot Results </title> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/bootstrap-responsive.css"> 
</head> 

    <body> 
<div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 


    <a href="#" class="brand">Clear Shot Results </a> 
    <div class="nav-collapse collapse"> 
     <ul class="nav pull-right"> 
     <li > <a href='evaluation_form.php'>Survey</a></li> 
     <li> <a href='about.html'>About Us</a></li> 
     <li  calss ="active"> <a href='#'>Home</a></li> 
</div> 
</div> 
</div> 
       </br> 
      </br> 
      </br> 
    <form method="GET" action="" align="center"> 
    <div style="text-align: center;"><img border="0" src="sight.jpg" alt="Sniper" width="150" height="150"></div> 



      </br> 
      Aggregated 
      <input type="radio" name="choice" value="AGG"checked >&nbsp 
      Non-aggregated 
      <input type="radio" name="choice" value="NonAGG" >&nbsp 
      Blekko 
      <input type="radio" name="choice" value="Blekko" >&nbsp 
       Bing      
      <input type="radio" name="choice" value="Bing">&nbsp 
      Google 
      <input type="radio" name="choice" value="Google"><br /> 

      </br> 
      </br> 
      <input name="query" type="text" size="60" maxlength="60" value="<?php 

if(isset($_GET["query"])) 
    echo $_GET["query"]; 

?>" /><br /> 

      <input class="btn btn-primary btn-large" type="submit" value="Search" /> 
      </form> 
      <form method="GET" action="" align="center"> 
      </br> 
      </br>

來源

2013-07-29 user2562455

你能裝上去了上的jsfiddle？ – jeff

偏題：如果這是你網站的複製+粘貼，它看起來像'calss =「active」'是一個錯字錯誤。另外，'value =「AGG」checked'缺少空格，因此可能無法正常工作。 – Spudley

此外，您的HTML需求清理。 'align'和'border'HTML屬性在HTML5中被棄用，你的home鏈接有'class'拼寫錯誤，並且有很多不一致的空白。空白的東西不是一個技術問題，但它確實妨礙了可讀性，使得各種其他錯誤難以捉摸。 – Shauna

您需要將text-align:center CSS屬性添加到您的表單中。

View the JSFiddle here

form 
{ 
    text-align:center; 
}

OR（壞實踐..使用CSS而不是內嵌樣式）

變化：

<form method="GET" action="" align="center">

要：

<form method="GET" action="" style="text-align:center;">

這可以按照預期在Firefox，Safari & Chrome上運行。

View the working JSFiddle (Click here)

來源

2013-07-29 15:10:27 Anil

非常感謝！ – user2562455

不同的瀏覽器HTML對齊

回答

相關問題