1

页面的位置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>

4

3 回答 3

1

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

全屏查看实际margin-left工作的结果。

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>

于 2020-03-21T15:18:29.217 回答
1

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

于 2020-03-21T15:18:42.707 回答
-1

您可以使用“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/

于 2020-03-21T15:23:30.217 回答