选择和textarea未正确对齐 [英] Select and textarea not correctly aligned

问题描述

如下图所示：

我希望textarea和select可以正确对齐，但不起作用。 p>

这些是元素的CSS：

主div（其中元素是）：

  #janela 
 {
 position：absolute; 
 width：auto; 
 height：auto; 
 top：30％;还剩
：40％; 
 margin-top：-140px; 
 margin-left：-170px; 
背景：#fff; 
 border-radius：3px; 
 border：1px solid #ccc; 
 box-shadow：0 1px 2px rgba（0，0，0，.1）; 
} 
  

选择CSS：

  #usuario 
 {
 border-color：black; 
宽度：100％; 
 height：30px; 
 font-size：16px; 
} 
  

Textarea css：

  .post-body 
 {
 width：580pt; 
 height：auto; 
 padding：5px 5px 5px 5px; 
 font-family：'Segoe UI'，sans-serif; 
 font-size：16px; 
颜色：黑色; 
 margin：0 0 20px 0; 
调整大小：垂直; 
} 
  

按钮css：

  .newPostContent.btn 
 {
 width：100％; 
 line-height：45px; 
} 
  

为了兼容性，我使用了100％的宽度，所以如何使这些元素对齐正确吗？

解决方案

大多数表单元素都有默认边框和填充。您可以设置 box-sizing：border-

使得它们被包括在总箱子尺寸中。 jsdata-hide =false>

select，input，textarea {宽度：100％; box-sizing：border-box;}

< p> ; <选择> < option value =volvo> Volvo< / option> < option value =saab> Saab< / option> < option value =mercedes> Mercedes< / option> < option value =audi> Audi< / option> < /选择>< / p为H.< p为H. < TextArea>< / textarea的>< / p为H.< p为H. < input type =submitvalue =Submit/>< / p>

b

i'm having an annoying problem with CSS/HTML.

As the image follows:

I want the textarea and select to be aligned correctly, but it's not working.

These are the CSS of the elements:

Main div (where the elements are):

#janela
{
    position: absolute;
    width: auto;
    height: auto;
    top: 30%;
    left: 40%;
    margin-top: -140px;
    margin-left: -170px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

Select CSS:

#usuario
{
    border-color: black;
    width:100%;
    height: 30px;
    font-size: 16px;
}

Textarea css:

    .post-body
{
    width: 580pt;
    height: auto;
    padding: 5px 5px 5px 5px;
    font-family: 'Segoe UI',sans-serif;
    font-size: 16px;
    color: black;
    margin: 0 0 20px 0;
    resize:vertical;
}

Button css:

    .newPostContent.btn
{
    width: 100%;
    line-height: 45px;
}

I use 100% width for compatibility stuff, so how do I make those elements aligned correctly?

解决方案

Most of the form elements have default borders and padding. You can set box-sizing:border-box to make them to be included of the total box size.

select,
input,
textarea {
  width: 100%;
  box-sizing: border-box;
}

<p>
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</p>
<p>
  <textarea></textarea>
</p>
<p>
  <input type="submit" value="Submit" />
</p>

这篇关于选择和textarea未正确对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！