如何移动标题的标题以使其与页面的主要内容对齐？答案

【问题标题】：How to move title of header for it to line up with main content of the page?如何移动标题的标题以使其与页面的主要内容对齐？
【发布时间】：2014-08-17 22:48:55
【问题描述】：

我的主要内容部分有一行，我给它的宽度为 1000 像素，并以 margin:0 auto 居中。目前，我的标题标题当然一直在左边，我希望它在行开始的地方对齐。我怎样才能做到这一点？

http://jsfiddle.net/zck9c8ud/

<header>
    <nav>
        <ul>
            <h1>title of page</h1>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>Portfolio</li></a>
            <a href="#"><li>About</li></a>
        </ul>
    </nav>
</header>




<div class="row">
    <div class="col">col1</div>
    <div class="col">col1</div>
    <div class="col">col1</div>
</div>


*{
margin:0px;
padding:0px;

}

header{

background:orange;
color:white;
padding:10px;
}

header h1{
display:inline;
position:relative;
left:200px;
}



nav ul{
display:inline;
}

nav ul li{
display:inline-block;
color:white;
position:relative;
left:70px;
}

.row{
width:1000px;
margin:0 auto;
}

.col{
background:#999;
width:33%;
float:left;
margin:10px;
padding:10px;
color:white;
height:400px;
}

【问题讨论】：

给它同样的宽度和边距？此外，您的 <ul> 是无效的 HTML； <ul> 或 <ol> 的唯一有效子元素是 <li> 元素。没有其他的。完全没有。

标签： html css header title

【解决方案1】：

我不确定我是否正确理解了您的问题，但这是我尝试解决的方法：

TLDR：看看这个小提琴：http://jsfiddle.net/arnellebalane/LLzmseoq/

首先，我只是将标题和行包装在一个名为.wrapper 的单独容器中，我给它的宽度为1000px。

<div class="wrapper">
  <h1>title of page</h1>

  <div class="row">
    <div class="col">col1</div>
    <div class="col">col1</div>
    <div class="col">col1</div>
  </div>
</div>

然后我将.row 的宽度更改为800px，将h1 的宽度更改为200px（如果需要，请调整这些值。

然后我将它们浮动到不同的方向，以便它们可以并排放置。

【讨论】：