标题中的间距

Question

我的css代码是 -

<style>
        header {
            background-color:teal;
            color:white;                
            padding:5px;
        }
</style>

这是我在jsp体内的标题 -

<header>     
        <h1 style="text-align:center">File Tracking System</h1>
        <img style="text-align:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/> 
        <a href="department.jsp">Create</a>
        <form style="float:right;" action=" LogoutServlet" method="post">
            <input type="submit" value="Logout" >
        </form>
        <br>
      </header>  

您是否可以在注销按钮下方看到图像和空间上方的空间。我不希望这个空间我希望图像适合左侧并朝向中心，但它就是这样的。如果有人可以纠正它？

Answer 1

这个怎么样......

您可以使用display: flex属性，该属性指定项目的长度，相对于同一容器内其他灵活项目。

header {
            background-color:teal;
            color:white;                
            padding:5px;
            display: flex;
        }

      <header>     
        <img style="float:left" src="images.png" width="200" height="100" alt="NSIC-logo1"/> 
        <a href="department.jsp">Create</a>
        <h1 style="text-align:center">File Tracking System</h1>
        <form style="float:right;" action=" LogoutServlet" method="post">
            <input type="submit" value="Logout" >
        </form>
        <br>
      </header>

Answer 2

尝试此操作，编辑 header { background-color:teal; color:white; padding:5px; width:100%; height:200px; } img{float:left;} a{float:left;} h1{ float:left; margin-left:50px; } 代码，因为它们排列不正确。

var result = _.chain(folders)
    .groupBy('year')
    .mapObject( year => _.groupBy(year, 'password'))
    .value();

CSS

var result = _.chain(folders)
    .groupBy('year')
    .mapObject(function(year) {
        return _.groupBy(year, 'password');
    })
    .value();