html - 使用 Css 而不是对齐 <P> 标记内的两个文本

我正在使用 nbsp; 对齐文本。有什么简单的方法可以使用 CSS 实现吗？

    <p>Website:&nbsp;&nbsp;&nbsp;&nbsp;https://www.helloworld.com</p>
    <p>Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;support@helloworld.com</p>
    <p>Phone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;00-554422000</p>
    <p>Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Secret Service HQ</p>
    <p>Postal Code:&nbsp;&nbsp;&nbsp;&nbsp;89509</p>
    <p>City:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3829 Martha Ellen Drive</p>
    <p>Region:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Reno, NV</p>

最佳答案

如果您不想使用表格:

/* external.css */
html,body{
  padding:0; margin:0;
}
body{
  background:#000; overflow-y:scroll;
}
.main{
  width:940px; background:#ccc; padding:20px; margin:0 auto;
}
#details>*{
  display:block;
}
label{
  float:left; width:100px;
}
#map{
  margin-top:10px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Test Template</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <div id='details'>
      <label for='web'>Website:</label>
      <a id='web' href='https://www.helloworld.com'>https://www.helloworld.com</a>
      <label for='mail'>Email:</label>
      <a id='mail' href='mailto:support@helloworld.com'>support@helloworld.com</a>
      <label for='phone'>Phone:</label>
      <a id='phone' href='tel:00554422000'>00-554422000</a>
      <a id='map' href='https://www.google.com/maps/dir//Reno,+NV/@39.557847,-119.9909255,11z/data=!4m8!4m7!1m0!1m5!1m1!1s0x809940ae9292a09d:0x40c5c5ce7438f787!2m2!1d-119.8138027!2d39.5296329'>Not the Secret Service HQ</a>
      <label for='adr'>Address:</label><div id='adr'>3829 Martha Ellen Drive</div>
      <label for='cs'>City &amp; State</label><div id='cs'>Reno, NV</div>  
      <label for='zip'>Postal Code:</label><div id='zip'>89509</div>
    </div>
  </div>
</body>
</html>

关于html - 使用 Css 而不是对齐 <P> 标记内的两个文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49440612/

html - 使用 Css 而不是对齐 <P> 标记内的两个文本

上一篇：html - 我的按钮周围有一个边框，当我点击屏幕上的某个地方时它会消失

下一篇：html - 如何在 Django 中呈现 html 表单