Question

我为我的某个项目创建了一个网页，并且我尝试将文本字段旁边的上传按钮对齐。也许更好地解释为图片。您可以看到两个按钮在提交按钮的左下方对齐。我希望它在设备Id文本字段的左侧对齐。我已经尝试设置文本字段的显示属性，以及两个按钮，但它没有工作。我尝试设置浮动属性，这也没有用。我正在寻找可以从Purecss.io中使用的网格，但我不确定这是否能解决问题。我尝试过使用vertical-align属性，但仍然没有面团。我使用普通的bootstrap主题。我的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

编辑：我通过应用＆＃34; float：right＆＃34;来解决这个问题。在第一个整个表单，文本区域和按钮。两者之间仍然存在巨大的横向。

#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;
	margin-top: 35px;
	}
.left{
    float: left;
    text-align: left;
	}

<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> 
		<input type="submit" value="Upload Image" name="submit">
		<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">
		</div>
	</form>
    
    
</div>

我认为这就是你所要求的我重新安排了你的html并增加了几条css规则。

通过将设备ID字段上的显示设置为内联而不是阻止上传按钮，我将它们放在同一行上。

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

然后将你的第二张表格浮动到左边。

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

1 个答案: