Html CSS div未正确水平对齐_Html_Css_Alignment_Contacts

Html CSS div未正确水平对齐

html css

Html CSS div未正确水平对齐,html,css,alignment,contacts,Html,Css,Alignment,Contacts,这可能是一个愚蠢的问题，但这一整天都让我发疯。我需要将contacthor类的两个div在顶部对齐，但不能通过使用边距顶部：-x或其他方式强制对齐此外，我是网页设计新手，所以如果我有无用的代码，请解释谢谢 #红色联系人{ 页边距底部：0；左侧填充：5vh；字体大小：15px；线高：30px；背景：黑色； } 1.contacthor{ 显示：内联块； } 表单>.contacthor>.input{ 颜色：#C5B358；字体大小：15px；背景色：黑色；边际上限：0；左边

这可能是一个愚蠢的问题，但这一整天都让我发疯。我需要将

contacthor

类的两个div在顶部对齐，但不能通过使用

边距顶部：-x

或其他方式强制对齐

此外，我是网页设计新手，所以如果我有无用的代码，请解释

谢谢

#红色联系人{
页边距底部：0；
左侧填充：5vh；
字体大小：15px；
线高：30px；
背景：黑色；
}
1.contacthor{
显示：内联块；
}
表单>.contacthor>.input{
颜色：#C5B358；
字体大小：15px；
背景色：黑色；
边际上限：0；
左边距：1vh；
边缘底部：1vh；
高度：30px；
宽度：190px；
显示：块；
}
.contacthor>textarea{
颜色：#C5B358；
字体大小：15px；
字体系列：“蒙特塞拉特”，无衬线；
宽度：60vh；
高度：25vh；
背景：黑色；
边界：1px；
边框样式：实心；
边界半径：3px；
边框颜色：灰色；
左侧填充：4px；
边际上限：0；
边缘底部：1vh；
左边距：1vh；
}


名义
埃普雷萨酒店
邮寄
门萨耶

为什么会有这样的问题。在输入之前？另外，我强烈建议不要使用vh或像素。你应该和他们一起去。在不做任何事情的情况下，你应该试着用flexbox做类似的事情

#redcontact {
  width: 100%;
  height: 100%;
  font-size: 15px;
  line-height: 1.5;
  background-color: #000;
  color: #fff;
 }

form {
  display: flex;
  padding: 2em;

  .contacthor {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 2em;

    input,
    textarea {
      color: #C5B358;
      background-color: transparent;
      margin-left: 1em;
      margin-bottom: 1em;
      padding: 0.5em 1em;
      width: auto;
      display:block;
    }

    input {
      border: 0;
    }

    textarea {
      border: 1px solid grey;
      border-radius: 3px;
    }
  }
}

尝试添加

垂直对齐：顶部

到

合同

我同意Chere的回答，你应该使用类似或的东西。但是，如果您想在本例中保持简单，或者只是想知道代码不起作用的原因，下面是一个解决方案：

#红色联系人{
页边距底部：0；
左侧填充：5vh；
字体大小：15px；
线高：30px；
背景：黑色；
}
1.contacthor{
显示：内联块；
}
表单>.contacthor>.input{
颜色：#C5B358；
字体大小：15px；
背景色：黑色；
边际上限：0；
左边距：1vh；
边缘底部：1vh；
高度：30px；
宽度：190px；
显示：块；
}
.contacthor>textarea{
颜色：#C5B358；
字体大小：15px；
字体系列：“蒙特塞拉特”，无衬线；
宽度：60vh；
高度：25vh；
背景：黑色；
边界：1px；
边框样式：实心；
边界半径：3px；
边框颜色：灰色；
左侧填充：4px；
边际上限：0；
边缘底部：1vh；
左边距：1vh；
}
.contacthor>p{
边缘底部：5px；
边际上限：0；
边缘底部：1vh；
左边距：1vh；
}
.contacthor>输入[值=环境]{
显示：块；
边际上限：0；
边缘底部：1vh；
左边距：1vh；
}
/*====要修复的样式示例=====*/
标签，p{
颜色：白色；
}
/*====回答问题的方式=====*/
1.contacthor{
垂直对齐：顶部；
}


名义
埃普雷萨酒店
邮寄
门萨耶

我做了一个网格。看看你是否在寻找类似的东西。

标记：

<body>
    <div class="holder">
    <form action="">
       <div class="contacthor">
           <label for="name" >Nombre</label>
          <input class="input" type="text" name="name_user" placeholder="test">
        <label for="org">Empresa</label>
          <input class="input" type="text" name="org" placeholder="test">
        <label for="mail">Mail</label>
          <input class="input" type="text"  name="mail" placeholder="contacto@test.com">
      </div>
        <div class="contacthor">
          <label for="Mensaje">Mensaje</label>
          <textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
          <input type="submit" value="enviar">
      </div>
    </form>
  </div>
</body>


名义
埃普雷萨酒店
邮寄
门萨耶

使用flexbox。将display:flex放在表单元素上，默认情况下它将顶部对齐！

<body>
    <div class="holder">
    <form action="">
       <div class="contacthor">
           <label for="name" >Nombre</label>
          <input class="input" type="text" name="name_user" placeholder="test">
        <label for="org">Empresa</label>
          <input class="input" type="text" name="org" placeholder="test">
        <label for="mail">Mail</label>
          <input class="input" type="text"  name="mail" placeholder="contacto@test.com">
      </div>
        <div class="contacthor">
          <label for="Mensaje">Mensaje</label>
          <textarea name="mensaje" tabindex="5" placeholder="text..."></textarea>
          <input type="submit" value="enviar">
      </div>
    </form>
  </div>
</body>