如何正确处理 margin-left？

Question

portfolio页面的位置很好，但我觉得我没有正确使用礼仪margin-left，我觉得我必须使用其他礼仪？

然后，我的第二个问题是我的languages页面离我的portfolio页面太远，我想修复到50 px。但是我做不到，因为我遇到了第一个问题。

感谢您的帮助。

body{
 margin: 0px;
 padding: 0px;
}

header{
 background-color: #B1DBE8;
 height: 98px;
}

.header-block{
 font-size: 11px;
 text-transform: uppercase;
 padding-top: 8px;
 font-weight: 700;
 color: #777;
 line-height: 20px;
}

.page-left{
 display: inline-block;
 margin-left: 430px;
}

<body>
  <header>
   <div class="header-block">
    <div class="page-left">Portfolio</div>
    <div class="page-left">Languages</div>
   </div>
  </header>
 </body>

Answer 1

您应该为第二个问题的代码创建一个新的 selector：

View the result in full screen for actual margin-left working.

body{
 margin: 0px;
 padding: 0px;
}

header{
 background-color: #B1DBE8;
 height: 98px;
}

.header-block{
 font-size: 11px;
 text-transform: uppercase;
 padding-top: 8px;
 font-weight: 700;
 color: #777;
 line-height: 20px; 
}

.page-left{
 display: inline-block;
 margin-left: 430px;
  border:1px solid black;
}
.Languages{
 display: inline-block;
margin-left: 30px;
border:1px solid red;
}

<body>
  <header>
   <div class="header-block">
    <div class="page-left">Portfolio</div>
    <div class="Languages">Languages</div>
   </div>
  </header>
 </body>

Answer 2

只需将 margin-left: 430px; 添加到 header-block div

Answer 3

你可以使用 "flex" 它对你有帮助在不同的屏幕尺寸下有助于安排合适的比例

试试。

body{
 margin: 0px;
 padding: 0px;
}

header{
 background-color: #B1DBE8;
 height: 98px;
}

.header-block{
 font-size: 11px;
 text-transform: uppercase;
 padding-top: 8px;
 font-weight: 700;
 color: #777;
 line-height: 20px;
    display: flex;
}

.page-first{
 display: inline-block;
 margin-left: 430px;
}
.page-second{
 margin-left: 50px;
}

<body>
  <header>
   <div class="header-block">
    <div class="page-first">Portfolio</div>
    <div class="page-second">Languages</div>
   </div>
  </header>
 </body>

例子。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何正确处理 margin-left？

How to handle margin-left correctly?

css

margin

css-position

margin-left