3

私はhtmlの初心者です。オレンジ色のテキストをオレンジ色の境界線のある白いボックスに入れようとしています。私が持っている：

    <div
   style="
   top: 20px; 
   left: 110px; 
   position: absolute; 
   z-index: 3; 
   visibility: show;
    width: 45px;
   height: 15px;
   background:#FFFFFF;
   border-color: #E2943C;
    border-style: solid;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;">

  <p> 
    <font size="-1" color="#E2943C" face="Lucida Sans Unicode, Lucida Grande, sans-serif"> Beta </font> </p>  
</div>

何らかの理由で、テキストがボックス内ではなくボックスの下に表示されています。私はそれがいくつかの単純な愚かなエラーだと確信していますが、それを特定することはできないようです - 誰か提案はありますか?

4

5 に答える 5

3

タグに適用するだけmargin:0pxでp動作するはずですあなたのdivの高さは小さいので、デフォルトのマージンのためにテキストが落ちていますp

于 2012-08-22T18:31:28.613 に答える
3

解決策ではなく、スパゲッティのクリーンアップです。

まず、マークアップからインライン スタイルを取得します。

http://jsfiddle.net/uA94u/

コードが読みやすくなりました。

<div class="content">
  <p>Beta</p>  
</div>​

.content 
{ 
    top: 20px; 
    left: 110px; 
    position: absolute; 
    z-index: 3; 
    visibility: show;
    width: 45px;
    height: 15px;
    background:#FFFFFF;
    border:1px solid #E2943C;
}

p
{
    font-size:1em;
    color:#E2943C;
    font-face:Lucida Sans Unicode, Lucida Grande, sans-serif;
}
于 2012-08-22T18:32:01.800 に答える
2

インライン スタイルの使用は、要素のスタイルを設定する時代遅れの方法です。いくつかのチュートリアルが、正しい方向に進むのに役立つはずだと思います。

要素のスタイルを設定する方法は、 CSS (Cascading Style Sheet)ファイルをドキュメントにリンクするか、タグを使用してスタイルを埋め込むことです。

より受け入れられたバージョンは次のとおりです。

http://jsfiddle.net/FvC9n/

チュートリアルが必要な場合は、お問い合わせください。リンクをいくつか表示できます。

開始するのに適した場所 (ビデオなしで対処できる場合) はhttp://www.w3schools.com/css/css_howto.aspです。これは初心者を対象としています。

于 2012-08-22T18:34:18.353 に答える
1

フォントline-heightを正確に区画の高さ (15 px) にすると、垂直方向の中央に配置されます。さらに追加text-align:center;すると、水平方向の中央になります。

これらの CSS 属性を段落 CSS に追加します。この例を見てください

于 2012-08-22T18:35:11.330 に答える
0

Chrome では、テキストはボックスの外側に表示されましたが、IE8 では正しく表示されました。以下を適用します。

<style>
    .divClass {
        top: 20px; 
        left: 110px; 
        z-index: 3; 
        width:50px;
        background:#FFFFFF;
        border-color: #E2943C;
        border-style: solid;
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px;
        border-right-width: 1px
    }
    </style> 

    <div
       class="divClass">

      <p> 
        <font size="-1" color="#E2943C" face="Lucida Sans Unicode, Lucida Grande, sans-serif"> Beta </font> </p>  
    </div>
于 2012-08-22T18:36:32.327 に答える