Question

我在第四节/橙色div或被叫内容部分中对齐我的文本时遇到了麻烦。我希望内容部分div中的文本左对齐，无论我如何设置我的margin-left，它都不会将我的文本对齐到我的内容部分div的左上角。这是我的代码：

<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>

Answer 1

添加＆＃34;清除：两者;＆＃34;到#content-section style：

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

Answer 2

在“.redbar-menu”中，使用“line-height：51px;”而不是填充顶部，并设置高度：100％; 请注意，请使用chrome开发人员工具查找CSS和JS问题。祝你好运

Answer 3

试试这个：

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

小提琴：https://jsfiddle.net/02hfrvvx/

我在为BBC副本网站调整文本时遇到问题

3 个答案: