Question

我希望所有陈述的答案都从同一位置开始。例如，喜欢的电视节目和推特回答都从相同的地方开始，并且它们之间的间隔均匀。我有下面列出的代码。我还添加了一张照片。我知道这很简单，但是我很难弄清楚

html {

	min-height: 100%:;
	overflow: hidden;
}

body {

	height: calc( 100vh - 8em);
	padding: 4em;
	background-color: black;
	text-align: left;
}

p {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 10px;
	color: white;

}

h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h1 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}

h5 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
	color: #89e20b;
}
 .line {

 	position: left;
 	top: 35%;
 	width: 5em;
 	margin: 0 auto;
 	text-align: left;
 }

 img {

 	align-content: left;
 }

<html>
<head>
	<title>Web Developer</title>
	<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<img src="jcblogo.png" height="45" width="160">
	<div>
	<p><h4> # General Information</h4></p>
		
		<p><h4>#-------------------------------</h4></p>
	</div>
		
		<p>name    :Jacob Olenick</p>
		<p>Occupation    :Designer and Developer</p>
		<p>Location    :Las Vegas</p>
		
		<div>
		<p><h3># Past Work</h3></p>
			
			<p><h3>#-------------------------------</h3></p>
		</div>
			
			<p>Creative    @ Vous Church</p>
			<p>Creative    @ King's Church</p>
			<p>Creative    @ Relentless Church</p>
			<p>Creative    @ Hillsong Las Vegas</p>
			<p>Developer   @ Chrishan Technology Solutions</p>
			<p>Creative Director    @ Givary 
				
				<div>
				<p><h2># About Me</h2></p>
				
				<p><h2>#-------------------------------<h2></p>
				<div>
				
				<p>Husband to    : Megan Olenick</p>
				<p>Favorite Drink    : Coffee/Orange Juice</p>
				<p>Favorite City    : NYC
				<p>Favorite Preacher    : Carl Lentz</p>
				<p>Best TV Show    : Stranger Things/Chicago PD
				
				
				<div>
				<p><h1># Social and Contact</h1></p>
				
				<p><h1>#-------------------------------</h1></p>
			</div>
				
				<p>twitter    @jacobolenick</p>
				<p>instagram    @jacobolenick</p>
				<p>behance    /jacobolenick</p>
				<p>github    /jacobolenick</p>
				<p>email    olenickjacob@gmail.com</p>
				
				<p><h5>Love what you do and honor God</h5></p>



</body>
</html>

Answer 1

实现所需目标的最简单方法是使用table：

<table>
  <tr>
    <td>Name</td>
    <td>: Jacob Olenick</td>
  </tr>
  <tr>
    <td>Occupation</td>
    <td>: Designer and Developer</td>
  </tr>
  <tr>
    <td>Location</td>
    <td>: Las Vegas</td>
  </tr>
</table>

Answer 2

很多方法，但是一些基本的CSS作为指针

.question {
  display: inline-block;
  width: 150px;
}

.answer {
  display: inline-block;
  width: 300px;
  padding-left: 7px;
}

.answer::before {
  content: ":";
}

<body>
  <div>
    <span class="question">
                Name
            </span>
    <span class="answer">
                Jacob O
            </span>
  </div>
  <div>
    <span class="question">
                Occupation
            </span>
    <span class="answer">
                Designer and Dev
            </span>
  </div>
</body>

试图弄清楚

2 个答案: