如何正确对齐 <label>、<input>、文本、输入字段、真实按钮和“<a> link 按钮”并使用相同的字体？

Question

我的问题（简要）： 我希望文本用户名、您为用户名键入的文本、真实按钮文本 "or" 和 Link 按钮文本大小完全相同且位于相同的 "line" -他们排的不是很顺...

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

我将其从我的网站中删除，以使代码尽可能小。如果您查看结果 - 用户名（您键入的用户名），"Real Button" 和 "or" 以及 "Link Button" 都是不同的高度......它似乎没有流动不错

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

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

之前的部分解决方案： 过去我使用 tables 并且事情似乎排列得更好但我试图不为此使用 tables 因为你不应该为这样的创建一个 table 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;
}

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

Answer 1

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

为了我对你的 fiddle 的分叉，我刚刚添加了这个（影响 .mydiv 内的所有元素）：

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

这是 link 到 fiddle：http://jsfiddle.net/f03jvuqb/

Answer 2

在摆弄这个并且不是 100% 满意之后...我研究了 Flex Box，它现在在大多数浏览器中都很流行。使用 Flex Box 的效果非常好，而且代码更简洁。一切都安排得很漂亮，我对结果很满意。在所有这些修补过程中，我学到了很多东西。改天我有时间的时候再post Flex Box 代码。

如何正确对齐 <label>、<input>、文本、输入字段、真实按钮和“<a> link 按钮”并使用相同的字体？

How can I align <label>,<input>, text, input fields, a real button, and a "<a> link button" properly and with the same font?

html

css

text-alignment