<P> 使用 css 对齐标签中的两个文本，而不是

我正在使用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

<p>
Address<span class="spacer"></span>1234
</p>

.CSS

.spacer {
    display: inline-block;
    width: 50px;
}

只需将跨度的宽度设置为您想要的空间量即可。

使用表格！

如果需要，可以增加第一个子td的padding-right值，以在列之间创建更大的距离。

td:first-child {
  padding-right: 10px;
}

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

相关内容

最新更新

热门标签：