0

したがって、htmlページをフォーマットするためのこのcssコードがあります。問題は、ブラウザーでページを表示すると、まったくフォーマットされていないと表示されることです。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) HTML/CSS がどのように準拠されているかを確認するソースとして Dreamweaver を使用しないでください。常にブラウザーで実行してください...議論する理由が多すぎます。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" />

これは、includes から 1 つ上のディレクトリにある html ページで機能します。たとえば、index.html ページの場合:

Web フォルダ構造の例

この場合、ブラウザーが gallery.css ファイルを見つける方法は次のとおりです。

  1. index.html が現在あるディレクトリ (サイト) から
  2. 1 レベル下のディレクトリ「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">

等..

于 2012-10-31T14:59:01.750 に答える