html - 如何正确对齐 <label>、&lt;input&gt;、文本、输入字段、真实按钮和 "<a> link button"并使用相同的字体？

Question

我的问题(简要): 我希望文本用户名、您为用户名键入的文本、“或”的真实按钮文本和链接按钮文本的大小完全相同并且在同一“行”上 - 它们不会平滑排列。 ..

我试过自己解决这个问题吗？其他缩放问题 我花了相当多的时间试图使它尽可能接近完美，但是，据我所知，我永远无法让它满意。当我在网站的其他部分工作时，我放弃了好几个月，但它应该是可能的，这是我心中的一根刺。我在使用缩放时也遇到了问题 - 在某些缩放中，它看起来非常接近完美，我想“这已经是我能做到的最好的了!”。

我将其从我的网站中删除，以使代码尽可能小。如果您查看结果 - 用户名(您输入的用户名)、“真实按钮”、“或”和“链接按钮”都是不同的高度……它看起来不太流畅。

此外，如果将 2 个按钮放在彼此的顶部，则 SIGN 一词的宽度不同。如果我使用相同的字体、相同的大小、相同的一切，为什么 1 个比另一个宽？不同的字母间距？

虽然我确实放弃了这个，但最近我看到了另一个来自 Stack 的 fiddle ，它有点解决了这个问题，但没有标签，也没有排列所有东西。此代码基于该代码。我想，如果这个问题可以解决，我会用所有响应式设计等将其重新设计到我的网站中......

以前的部分解决方案: 过去我使用表格，事情似乎排列得更好，但我尽量不为此使用表格，因为您不必为这么短的 HTML 行创建表格。

JSFIDDLE: 我创建了一个 JSFiddle，您可以看到。

http://jsfiddle.net/PerryCS/7zc2vjmx/2/

HTML 代码:

    <form id="loginForm1" name="loginForm1?callingPage=validateForm" method="post" action="index.php" accept-charset="utf-8">

  <h5 class="text-center">In order to access some areas of the website, save estimates.</h5>

  <div class="mydiv">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
  </div>
  <div class="mydiv">
    <label for="pword">Password</label>
    <input type="password" id="pword" name="pword">
  </div>
  <div class="mydiv">
    <input class="button" type="button" name="buttonSignIn" value="SIGN IN"> or
    <a class="button" href="#">SIGN UP</a>
  </div>
</form>

CSS 代码

body {
  font-size: 1em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

input.button {
  height: 28px;
  font-size: 1em;
  color: white;
  font-weight: normal;
  font-style: normal;
  background: #4D28B2;
  border: 1px solid gray;
  vertical-align: middle;
  padding: 0px 5px;
}

a.button {
  display: inline-block;
  height: 28px;
  font-size: 1em;
  color: white;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  background-color: #4D28B2;
  border: 1px solid gray;
  vertical-align: middle;
  line-height: 28px;
  padding: 0px 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

input {
  height: 28px;
  font-size: 1em;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  background-color: #4D28B2;
  border: 1px solid gray;
  vertical-align: middle;
  line-height: 28px;
  padding: 0px 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

.mydiv {
  display: inline-block;
}

感谢您的宝贵时间 我提前感谢您在过去几年中花时间帮助我成长。你们帮我解决了一些问题，非常感谢你们的帮助。 :)

Answer 1

为所有这些具有相同设置的元素创建一个 CSS 规则，并添加 vertical-align: baseline。这应该将所有文本排列在相同的基线上，如果字体系列、字体大小、字体粗细、字体变化等相同，它应该看起来像你想要的那样。

我刚刚添加了这个(影响 .mydiv 中的所有元素):

.mydiv * {
  display: inline-block;
  vertical-align: baseline;
  font-family: Arial sans-serif !important;
  font-size: 1em !important;
}

这是 fiddle 的链接:http://jsfiddle.net/f03jvuqb/