BBCレプリカウェブサイトのテキストを整列する際に問題があります

4番目のセクション/オレンジ色のdivまたはコンテンツセクションという名前のテキストを整列する際に特に問題があります。どのように余白を設定しても、コンテンツセクションdivのテキストを左に揃えたい場合は、コンテンツセクションdivの左上隅にテキストを配置しません。BBCレプリカウェブサイトのテキストを整列する際に問題があります

<head> 

    <title>Technology</title> 

    <style type="text/css"> 

    #top-bar{ 

    width:1000px; 
    margin:0 auto; 
    background-color:#FFFFFF; 
    height:50px; 





    } 

    body{ 
    margin:0; 
    padding:0; 
    font-family:Helvetica, Arial , sans-serif; 
    } 

    #logo{ 
    margin-top:4px; 
    width:100px; 
    float:left; 

    } 



    .topbar-section{ 
    float:left; 
    border-left:1px grey solid; 
    height:100%; 
    } 

    #sign-in{ 


    border-right:1px grey solid; 
    width:150px; 
    height:100%; 

    } 

    #signin-text{ 

    position:relative; 
    left:30px; 
    top:15px; 
    font-weight:bold; 


    } 

    #empty-sec{ 
    border-right:2px grey solid; 
    width:80px; 

    } 

    .topbar-menu{ 
    font-weight:bold; 
    font-size:90%; 
    padding:13px 14px 0 0; 
    height:35px; 


    } 

    #search{ 

    width:80%; 
    background-color:grey; 
    border:none; 
    font-weight:bold; 
    backgroun-image:searchicon; 

    } 

    #searchicon{ 


    position:relative; 
    left:140px; 
    top:-35px; 
    margin-left:-3px; 
    } 

    #red-bar{ 
    margin-top:20px; 
    width:1000px; 
    margin:0 auto; 
    background-color:#BB1919; 
    height:56px; 
    } 

    #redbar-text{ 
    float:right; 
    margin-top:10px; 
    margin-right:27px; 
    margin-bottom:10px; 
    color:#FFFFFF; 
    font-family:Helvetica; 
    font-size:160%; 
    border:3px black solid; 
    padding-bottom:0px; 

    } 

    #dark-red{ 


    background-color:#A91717; 
    width:1000px; 
    margin:0 auto; 
    height:50px; 

    } 

    .redbar-section{ 
    float:left; 
    border-left:0.5px black solid; 
    height:100%; 
    } 

    .redbar-menu{ 
    font-weight:bold; 
    color:#ffffff; 
    font-family:Height; 
    font-size:90%; 
    padding:13px 14px 0 0; 
    height:80%; 


    } 

    #downpointer{ 

    position:relative; 
    left:40px; 
    bottom:18px; 


    } 

    #more{ 
    color:#FFFFFF; 
    margin-left:4px; 
    } 

    #content-section{ 
    background-color:orange; 
    height:600px; 
    } 

    #content-text{ 
    text-align:left; 
    } 



    </style> 

</head> 

<body> 

<div id="top-bar"> 

<img id="logo" src="bbclogo.png"> 

<div id="sign-in" class ="topbar-section"> 

    <span id="signin-text"> Sign In</span> 

</div> 

<div id="empty-sec" class="topbar-section"> 




</div> 

<div class="topbar-section topbar-menu"> 

News 

</div> 

<div class="topbar-section topbar-menu"> 

Sports 

</div> 

<div class="topbar-section topbar-menu"> 


Weather 
</div> 

<div class="topbar-section topbar-menu"> 

TV 

</div> 

<div class="topbar-section topbar-menu"> 

Radio 

</div> 

<div class="topbar-section topbar-menu"> 

CBBC 


</div> 
<div class="topbar-section topbar-menu"> 

CBeebies 

</div> 

<div class="topbar-section topbar-menu"> 

More... 

</div> 

<div class="topbar-section topbar-menu"> 

<form > 
<input id="search" type="text" placeholder="Search..."> 



</form> 

<img id ="searchicon"src="searchicon.png"> 


</div> 

</div> 

<div id="red-bar"> 
<span id="redbar-text">Find local news</span> 
</div> 

<div id ="dark-red"> 

<div class="redbar-section redbar-menu"> 

Home 

</div> 

<div class="redbar-section redbar-menu"> 

UK 

</div> 

<div class="redbar-section redbar-menu"> 

World 

</div> 


<div class="redbar-section redbar-menu"> 

Business 

</div> 


<div class="redbar-section redbar-menu"> 

Politics 

</div> 


<div class="redbar-section redbar-menu"> 

Tech 

</div> 


<div class="redbar-section redbar-menu"> 

Health 

</div> 


<div class="redbar-section redbar-menu"> 

Education 

</div> 


<div class="redbar-section redbar-menu"> 

Entertainment & Arts 

</div> 


<div class="redbar-section redbar-menu"> 

Video and Audio 

</div> 


<div class="redbar-section redbar-menu"> 


<div id="more"> 
More 
</div> 
<img id="downpointer" src="downpointer.png"> 

</div> 




</div> 

</div> 

<div id="content-section"> 


<span id="content-text"> dadadadaa</span> 


</div> 












</body>

出典

2016-04-17 Jane Poe

あなたがフィドルを提供することができれば、他の人があなたを助けるのがより簡単です –

私はフィドルが何であるか分かりません。 Stackoverflowは私のHTMLの出力のスクリーンショットを投稿することを許可しません。 –

ここにあなたのhtml、css、javascriptを置くことができます。誰もがそれにアクセスし、編集してテストすることができます。したがって、ファイルを作成してすべてのコードを手動でコピーする必要はありません。 [JsFiddle]（https://jsfiddle.net/） –

はこれを試してみてください：ここでのように私のコードが見えるものである

<div style="text-align:left;"> 
    <span id="content-text"> dadadadaa</span> 
    </div>

フィドル：https://jsfiddle.net/02hfrvvx/は

出典

2016-04-17 11:46:38

私のコードを実行するとうまくいくように見えますが、それはfiddle（https://jsfiddle.net/noblegas/gk57neco/3/）ですが、開いても機能しません私のコードは、どんなインターネットブラウザでも使用できます。 –

<！DOCTYPE html> 残りのコードはここに入れてください –

追加 "クリア：両方;" 〜content-sectionスタイル：

#content-section{ 
    background-color:orange; 
    height:600px; 
    clear: both; 
}

出典

2016-04-17 11:56:14

ありがとうございました。明確な機能は何をすべきか？ –

これは、「左または右のいずれの側にもフローティング要素が許可されていない」という意味です。おそらく、他のdivsのfloat属性によるものでした。 –

「.redbar-menu」で「line-height：51px;」を使用します。パディングトップの代わりに、また高さを100％設定します。クロムの開発ツールを使用して、CSSとJSの問題を見つけてください。幸運

出典

2016-04-17 19:27:25

BBCレプリカウェブサイトのテキストを整列する際に問題があります

答えて

関連する問題