CSS - DIVアラインメントの問題

Question

私は以下のCSSに少し問題があります。

ボックスがすべて並んでいる間に、テキストをボックス内に表示させてから、テキストを定型化しようとしています...試行したすべてが失敗するようです。何かがそれをオーバーライドしている、またはブラウザが無視しているだけです。

「Foundation 100 - Presence」というテキストは、常にその意図された領域を超えているということです。このテキストは動的で常に変化します。したがって、このブロックのサイズは、ブロック内の文字数に基づいて変更されます。したがって、CSSのこの値 - > width：489px;それに応じて変更されます。

また、これらのブロックのそれぞれにHTMLフォームリンクが含まれています。 ...

いくつかの制限はJavaScript、Java、およびPHPなしです。ストレートHTMLとCSS。

誰でもこの1つで亀裂を起こしたいですか？ページの

コード：

#video_line { 
 
    width: 489px; 
 
    text-align: center; 
 
} 
 
#vl_desc { 
 
    float: left; 
 
    width: 200px; 
 
    height: 30px; 
 
    background: #ffffff; 
 
} 
 
#vl_rental { 
 
    float: left; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #ff0000; 
 
} 
 
#vl_sales { 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #00ff00; 
 
} 
 
#vl_view { 
 
    float: right; 
 
    width: 62px; 
 
    height: 20px; 
 
    background: #0000ff; 
 
} 
 
#vl_text_desc { 
 
    text-align: right; 
 
    font-size: 19 px; 
 
    font-weight: 300; 
 
}

<div id="video_line"> 
 
    <div id="vl_desc"> 
 
    <p id="vl_text_desc">Foundation 100 - Presence</p> 
 
    </div> 
 
    <div id="vl_rental">TEXT</div> 
 
    <div id="vl_sales">TEXT</div> 
 
    <div id="vl_view">TEXT</div> 
 
</div>

これは私が探しています何である - >

ここ

Answer 1

が開始

#video_line { 
 
    width:489px; 
 
    text-align:center; 
 
} 
 

 
#vl_desc { 
 
    float:left; 
 
    width:250px; 
 
    height: 30px; 
 
    background: #ffffff; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_rental { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #ff0000; 
 
    color: white; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_sales { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #00ff00; 
 
    color: darkgreen; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_view { 
 
    float:left; 
 
    width:62px; 
 
    height: 20px; 
 
    background: #0000ff; 
 
    color: yellow; 
 
    font-size: 18px; 
 
    font-family: arial; 
 
    font-weight: bold; 
 
    padding: 3px 6px; 
 
} 
 

 
#vl_text_desc { 
 
    text-align: right; 
 
    font-size: 19 px; 
 
    font-weight: 300; 
 
}

<div id="video_line"> 
 
    <div id="vl_desc"><span id="vl_text_desc">Foundation 100 - Presence</span></div> 
 
    <form id="vl_rental">TEXT</form> 
 
    <form id="vl_sales">TEXT</form> 
 
    <form id="vl_view">TEXT</form> 
 
</div>

です

Answer 2

単純に次のスタイルを変更します。

#vl_text_desc { 
    margin-top: 0; 
} 
#video_line { 
    width: 489px; 
    text-align: center; 
    display: inline; 
} 
#vl_view { 
    float: left; 
} 
#vl_desc { 
    float: left; 
    width: 200px; 
    height: 30px; 
    background: #ffffff; 
    margin-right: 16px; 
    margin-top: 0; 
} 

ここからあなたが好むようあなたがfont-familyとcolorを変更することができます。