Как правильно обрабатывать поля слева? - PullRequest
Новая
       87

Как правильно обрабатывать поля слева?

1 голос
/ 21 марта 2020

Позиция страницы portfolio хорошо позиционирована, но я думаю, что я не правильно использую правильность margin-left, я думаю, что я должен использовать другую собственность?

enter image description here

Тогда моя вторая проблема заключается в том, что моя страница languages находится слишком далеко от моей страницы portfolio, я хотел бы исправить ее на 50 px. Но я не могу сделать, потому что я застрял с моей первой проблемой.

enter image description here

Спасибо за помощь. 

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>

Ответы [ 3 ]

1 голос
/ 21 марта 2020

Просто добавьте margin-left: 430px; к div-блоку заголовка

1 голос
/ 21 марта 2020

Вы должны создать новый 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>
0 голосов
/ 21 марта 2020

Вы можете использовать «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/

...