我遇到的具体问题

Question

我正在尝试制作具有以下属性的响应式标题/导航表单：

当视口高于某个宽度时，某些类型的标签与输入框内联并垂直居中。
在小视口尺寸下，标签应垂直居中于输入和输出的上方。按钮和输入/按钮组合应为屏幕宽度的100％。
有一个视觉上组合的输入和按钮，就像Bootstrap中使用的那些不会分成不同的行
当它们全部在同一条线上时，可以填充屏幕的宽度，也可以作为整个单元（标题+输入+按钮）居中

我使用this JS fiddle作为表单的起点，将标签分成小宽度的单独一行，并成功使其工作，并使标签在小视口处的输入上方居中好。

到目前为止，我的代码是

CSS

form > div {
  clear: both;
  overflow: hidden;
  padding: 1px;
  margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
  margin: 0 0 5px 0;
}
form > div > label,
legend {
  width: 25%;
  float: left;
  padding-right: 10px;
  text-align: right;
  vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
  width: 75%;
  float: right;
}
form > div > fieldset label {
    font-size: 90%;
}
fieldset {
    border: 0;
    padding: 0;
}
@media (max-width: 600px) {
  form > div {
    margin: 0 0 15px 0;
  }
  form > div > label,
  legend {
      width: 100%;
    float: none;
    margin: 0 0 5px 0;
    text-align: center;
  }
  form > div > div,
  form > div > fieldset > div {
    width: 100%;
    float: none;
  }
  input[type=text],
  input[type=numeric],
  textarea,
  select {
    width: 100%;
  }
}

HTML

第一次尝试

<header class="page-header row center-block">
    <div class="center-xs">
    <form class="main-form input-group" action="/caulcuate" method="post">
        <label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
        <input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
               placeholder="number goes here" required autofocus>
        <span class="input-group-btn">
            <button id="calculate" class="btn btn-lg btn-primary" type="submit">
                100?
            </button>
        </span>
    </form>
    </div>
</header>

尝试2

<header class="page-header">
<form action="#">
  <div>
      <label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
    <div>
      <input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
               placeholder="number goes here" required autofocus>
        <!--<span class="input-group-btn">-->
            <button id="calculate" class="btn btn-lg btn-primary" type="submit">
                100?
            </button>
        <!--</span>-->
    </div>
  </div>
</form>
</header>

我遇到的具体问题

在尝试2 中，我注释掉了Bootstrap用来对按钮和输入字段进行分组的<span>，因为它总是将按钮放在一个单独的行上。
在两次尝试中，标题标签相对于输入框不垂直居中。我把它集中在早期的尝试1 的迭代中，但我似乎无法取回它。
尝试1 只是在标题行不占据整个屏幕宽度的任何大小时都不能正确居中。 尝试2 确实居中，但标签标题在大屏幕尺寸下离输入框太远，因此它的唯一中心是页面边框和内容之间的空白大致相等标题。

解决方案的想法

目前，尝试1中的HTML看起来似乎更接近于我想要的标签标题和按钮两者都在输入框中向右扫描。但是，尝试2实际上是在小屏幕尺寸下响应。
似乎也许如果我足够的<div>并且他们的课程很聪明，我最终会得到一些正常的东西，但可能会很脆弱。
我想到的另一个解决方案是创建两个单独的<header>并将它们包装在一对<div>中并使用@media查询来更改<div>是可见的。这似乎不如使用大量嵌套标签那么脆弱，但也需要一些代码重复。但是，到目前为止它似乎可能是最简单的选择。
根据屏幕大小切换显示<div>之间有些相关，我想可能有一些jQuery方法可以做到这一点，在这种情况下，CSS目前可能是错误的工具。

P.S。我希望我对矢量插图有更多的了解，所以我可以举出一个确切的例子来说明我没有所有描述性文字。

为居中的导航标题

CSS

HTML

第一次尝试

尝试2

我遇到的具体问题

解决方案的想法

0 个答案: