0

所以，我有这个 css 代码来格式化一个 html 页面。问题是，当我在浏览器中查看页面时，我认为它根本没有格式化。div 的titulo 和titulo2 是简单的文本行，而formulario 的div 是一种形式。我希望表单以页面为中心，左右边距自动。

谢谢

    @charset "utf-8";
    /* CSS Document */

    #titulo{
        background:white;
        text-align:center;
    };

    #titulo2{
        background:white;
        text-align:center;
    };

   #formulario{
        margin-left: auto ;
        margin-right: auto ;
        width: 400px;
        display: inline-block;
    };

好的，这是我的html：

<body>

<p>
<div id="titulo">Área Pessoal</div>
</p>

<p>
<div id="titulo2">Registo de Saídas</div>
</p>

<div id="formulario"><form>

<p>
<label>Data e hora : <input /></label>
</p>

<p>
<label>Morada : <input /></label>
</p>
<p>
<label>Localização Geográfica : <input /></label>
</p>

<p>
<label>Tipo de saída : <input type="radio" name="tipo" value="Sozinho" />Sozinho</label><input type="radio" name="tipo" value="Acompanhado" />Acompanhado</label>
</p>

<p>
<label>Condições Atmosféricas : <input /></label>
</p>

<p>
<label>Altura da maré : <input type="radio" name="mare" value="Alta" />Alta</label><input type="radio" name="mare" value="Baixa" />Baixa</label>
</p>

<p>
<label>Temperatura da Água : <input  /></label>
</p>

<p>
<label>Visibilidade Dentro de Água :  <input type="radio" name="visibilidade" value="Boa" />Boa</label><input type="radio" name="visibilidade" value="Má" />Má</label>
</p>

<p>
<label>Peixes Capturados : </label>
</p>
<p>
<label>espécies <input type="text" /></label>
</p>
<p>
<label>compimento <input type="text" /></label>
</p>
<p>
<label>peso <input type="text" /></label>
</p>
<p>
<label>Upload Ficheiros Multimédia :<br />
  <input type="file" name="ficheiro" multiple>
    </label>

  <p><input type="submit" value="Enviar"><input type="reset"></p>

</form></div>

<p>
<label><a href="historico_saidas.html">Histórico de Saídas</a></label>
</p>
<p>
<label><a href="estatisticas.html">Estatisticas</a></label>
</p>
</body>
</html>
4

3 回答 3

2

好的，1) 永远不要将 Dreamweaver 用作查看 HTML/CSS 是如何编译的来源，始终在浏览器中运行它......太多的理由要讨论。2）您需要将表单包装在一个 div 元素中，并为其分配一个设定的宽度（和高度取决于您的表单的设置方式）。完成后，为 div 分配 margin:auto 属性...

于 2012-10-31T15:00:44.977 回答
1

链接标签可能具有相对于根的引用。

例如，如果我有这个：

includes/gallery.css

那么链接可能如下所示：

<link href="/includes/gallery.css" rel="stylesheet" type="text/css" />

如果“gallery.css”文件不在以下位置，这将无法正确呈现：

[root directory]/includes/gallery.css

要解决此问题，可以在路径中添加一个句点，如下所示：

<link href="./includes/gallery.css" rel="stylesheet" type="text/css" />

或像这样删除初始的正斜杠：

<link href="includes/gallery.css" rel="stylesheet" type="text/css" />

这适用于从包含目录向上一个目录的 html 页面。例如，对于 index.html 页面：

示例 Web 文件夹结构

本例浏览器定位gallery.css文件的方式如下：

  1. 从 index.html 当前所在的目录（站点）
  2. 下移一级到目录“includes”
  3. 获取文件“gallery.css”

我希望这有帮助。

问候 - 韦恩·里斯特勒

于 2012-11-14T22:37:15.817 回答
0

这可能很明显，但是您的 div 标记是否正确？例子<div id="titulo"></div>

您在样式之后有结束标签，但之后最简单的方法可能是用 div 包装所有内容

#titulo { background:white; text-align:center; } 
#titulo2{ background:white; text-align:center; } 
#formulario{ margin-left: auto ; margin-right: auto ; width: 400px; display: inline-block; }
.wrapper{ width:600px; margin:0 auto; }

HTML：

<div class="wrapper"> 
<div id="titulo"><p>Área Pessoal</p></div> 
<div id="titulo2"><p>Registo de Saídas</p></div> 
<div id="formulario">

ETC..

于 2012-10-31T14:59:01.750 回答