不同的浏览器 HTML 对齐答案

【问题标题】：Different browsers HTML aligning不同的浏览器 HTML 对齐
【发布时间】：2013-07-29 23:10:27
【问题描述】：

我设计了我的搜索引擎网站的首页，我在网站建设期间在 Chrome 中使用它。

我刚刚在 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>

【问题讨论】：

你能在 JsFiddle 上放点东西吗？
离题：如果这是从您的网站复制+粘贴，看起来calss ="active" 是一个错字错误。此外，value="AGG"checked 缺少空格，因此可能无法正常工作。
另外，您的 HTML 需要清理。 align 和 'border' HTML 属性在 HTML5 中已弃用，您的主页链接有 class 拼写错误，并且有大量不一致的空白。空白不是技术问题，但它确实会妨碍可读性，使其他各种错误更难被发现。
抱歉，不知道 JsFiddle 是什么……谢谢你的错字！
您可能需要考虑使用更少的内联样式和属性，并改用单独的样式表。 align="center" 和 border="0" 确实是老式的做事方式。

标签： html css twitter-bootstrap browser alignment

【解决方案1】：

您需要将text-align:center CSS 属性添加到您的表单中。

View the JSFiddle here

form
{
    text-align:center;  
}

或者（不好的做法。使用 CSS 代替内联样式）

变化：

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

收件人：

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

这在 Firefox、Safari 和 Chrome 上可以正常工作。

View the working JSFiddle (Click here)

【讨论】：