怎样才能使h1和a标签处于同一行

如第一章图片所示，怎样才能使h1和a标签处于同一行啊，怎样设置hr的宽度。

h1是块级元素，所以他为独占一行，用display: inline-block; 将其转为行内块元素，既可以不换行，又可以用css控制它
控制hr宽度可以用：

hr{
    width: 100px;
}