Question

所以，我有这个css代码来格式化一个html页面。问题是，当我在浏览器中查看页面时，我认为它根本没有格式化。 Div的titulo和titulo2是简单的文本行，而公式的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>

Answer 1

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

Answer 2

链接标记可能具有根相对引用。

例如，如果我有这个：

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页面：

Example web folder structure

在这种情况下，浏览器找到gallery.css文件的方式如下：

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

我希望这会有所帮助。

问候 - Wayne Riesterer

Answer 3

这可能很明显，但你的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">

等。

CSS - Dreamweaver中的设计视图是可以的，但不是在浏览器中

3 个答案: