html - 根据图像对齐元素

Question

有人可以帮我举例说明如何完成以下布局吗？表格最适合这个吗？

https://gyazo.com/80a2f66d280c480c1e6e70637959b271

我不想对元素的宽度进行硬编码，因为我也需要它来响应，这就是我遇到困难的原因..

所以基本上我需要它居中而不是文本对齐居中。感谢我能得到的所有帮助。

Answer 1

不要使用表格，这样很难针对移动设备优化网站。这是我会做的:

body {
  font-family: Arial, sans-serif;
  color: #444444;
}

.info {
  border: 1px solid #bbbbbb;
  border-width: 1px 0;
  padding: 10px;
}

.row {
  line-height: 30px;
  padding: 10px;
}

.label {
  display: inline-block;
  width: 30%; /* You may want to adjust this property */
  margin: 0 10px;
  text-align: right;
  font-size: 95%;
  color: #888888;
}

button {
  border: none;
  background-color: #43CEAD;
  border-radius: 3px;
  padding: 4px 10px;
  color: white;
  font-size: 90%;
}

.right {
  float: right;
}

<div class="info">
  <div class="row">
    <span class="label">Name:</span>
    John Doe
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Password:</span>
    ********
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">Animus Heart ID:</span>
    B0 23459332
    <button class="right">Edit</button>
  </div>
  
  <div class="row">
    <span class="label">E-mail:</span>
    john@doe.com
    <button class="right">Edit</button>
  </div>
</div>