试图将上传按钮与HTML和CSS中的Textarea对齐

Question

我正在为我的一个项目制作一个网页，并试图对齐文本字段旁边的上传按钮。也许更好地解释为一张图片。您可以看到两个按钮在提交按钮的左下角对齐。我希望它在设备ID文本字段的左侧对齐。我已经尝试设置文本字段的显示属性，以及两个按钮，但它不起作用。我尝试设置浮动属性，这也不起作用。我正在查看可能从Purecss.io使用的网格，但我不确定这是否能解决问题。我试过使用垂直对齐属性，仍然没有面团。 我使用普通的引导主题。我的HTML技能是Java的基础。任何人都知道我可以在这里做什么？

这里是我的主容器：

<div class="container"> 
<!-- Main content here --> 


<div id="main"> 
    <h1 id="mainheader">Send an image to a Wearable device</h1> 
    <hr> 

    <form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">                 
     <textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/> 
     <button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button> 
    </form> 

    <form action="upload.php" method="post" enctype="multipart/form-data"> 
     Select image to upload: 
     <div id="filebutton"> 
     <input type="file" name="fileToUpload" id="fileToUpload"> 
     </div> 
     <input type="submit" value="Upload Image" name="submit"> 
    </form> 
</div> 

这里是我的风格

 #main { 
    vertical-align: middle; 
    } 
    #status{ 
    text-align: center; 
    background-color: #FFFFFF; 
    padding: 10px; 
    margin-top: 25px; 
    } 

    #mainheader{ 
    margin-bottom: 20px; 
    text-align: center; 
    font-family: 'Raleway', sans-serif; 
    } 
    #deviceID { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    } 

    #mainbutton { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    } 

    .button-xlarge { 
    font-size: 125%; 
    width:350px; 
    background: rgb(66, 184, 221); /* this is a light blue */ 
    } 

这里是一个预览图像：（遇到问题直接上传） http://tinypic.com/view.php?pic=1z499gw&s=8

编辑： 我通过在第一个整体表单，文本区域和按钮上应用“float：right”来稍微解决了这个问题。两者之间仍有很大的水平。

#main { 
     float:right; 
    } 

Answer 1

#main { 
 
    text-align: center; 
 
    } 
 
#mainheader{ 
 
    margin-bottom: 20px; 
 
    text-align: center; 
 
    font-family: 'Raleway', sans-serif; 
 
    } 
 
#mainbutton { 
 
    display: block; 
 
    margin: 35px auto; 
 
    } 
 
.button-xlarge { 
 
    font-size: 125%; 
 
    width:350px; 
 
    background: rgb(66, 184, 221); /* this is a light blue */ 
 
} 
 
input[type="submit"], #deviceID { 
 
    display: inline; 
 
    vertical-align: middle; 
 
\t margin-top: 35px; 
 
\t } 
 
.left{ 
 
    float: left; 
 
    text-align: left; 
 
\t }

<div id="main"> 
 
    <h1 id="mainheader">Send an image to a Wearable device</h1> 
 
    <hr> 
 

 
    <form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()"> 
 
\t \t <textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> 
 
\t \t <input type="submit" value="Upload Image" name="submit"> 
 
\t \t <button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button> 
 
    </form> 
 

 
    <form class="left" action="upload.php" method="post" enctype="multipart/form-data"> 
 
     Select image to upload: 
 
     <div id="filebutton"> 
 
     <input type="file" name="fileToUpload" id="fileToUpload"> 
 
\t \t </div> 
 
\t </form> 
 
    
 
    
 
</div>

我想这是你所要求的东西。
我重新安排你的HTML一点点，并添加了几个CSS规则。

通过设置设备ID字段和上传按钮上的显示内联而不是块我让他们在同一行上。

我用vertical-align来......好......对齐它们。并给了他们一个保证金。

然后将您的第二个表单浮动到左侧。