Question

我正在设计一个html页面，我希望将所有文本框和所有按钮对齐到垂直位置。

但是我无法理解如何将右侧的所有按钮对齐到目前为止我能够创建添加按钮。

这是我到目前为止的jsfiddle。以下是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>

<style type="text/css">
#my-text-box {
    font-size: 18px;
    height: 1.5em;
    width: 585px;
}
</style>

</head>

<body>
<h3>Test</h3>
<label for="pair">Name/Value Pair</label></br>
<input type='text' id='my-text-box' value="Name=Value" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button">Add</button>

</br>
</br>
</br>

<label for="pairs">Name/Value Pair List</label></br>
<textarea rows="30" cols="80">
some stuff
</textarea>


</body>

</html>

Answer 1

嗨，如果你想要这个结果，你可以修改你的html代码和一些css代码，就像这样

＆＃13;

#my-text-box {
    font-size: 18px; /* or larger */
    height: 1.5em; /* or larger */
    width: 585px; /* or larger */
}
textarea{
    width:585px;
    height:300px;
}
.form-section{
    overflow:hidden;
    width:700px;
}
.fleft{float:left}
.fright{float:left; padding-left:15px;}
.fright button{display:block; margin-bottom:10px;}

＆＃13;

<h3>Test</h3>


<label for="pair">Name/Value Pair</label></br>
<div class="form-section">
    <div class="fleft">
        <input type='text' id='my-text-box' value="Name=Value" />
    </div>
    <div class="fright">
        <button type="button">Add</button>
    </div>
</div>

</br>
</br>
</br>

<label for="pairs">Name/Value Pair List</label></br>
<div class="form-section">
    <div class="fleft">
       <textarea >
        some stuff
        </textarea>
    </div>
    <div class="fright">
        <button type="button">Sort by name</button>
        <button type="button">Sort by value</button>
        <button type="button">Delete</button>
        <button type="button">Show XML</button>
    </div>
</div>

＆＃13;

Answer 2

您可以使用此风格：

button {
float:right;
}

<强> DEMO

Answer 3

you can some modify your html code and some css code as like this

<h3>Test</h3>
<label for="pair">Name/Value Pair</label></br>
<div class="inputForm">
<input type='text' id='my-text-box' value="Name=Value" />
<button type="button" >Add</button>
</div>

</br>
</br>
</br>

<label for="pairs">Name/Value Pair List</label></br>
<textarea rows="30" cols="80">
some stuff
</textarea>

css are below

#my-text-box {
    font-size: 18px; /* or larger */
    height: 1.5em; /* or larger */
    width: 80%; /* or larger */
}
.inputForm{}
.inputForm input{float:left;}
.inputForm button{float:right;}

Answer 4

试试这段代码： HTML

<div id="container">
<div id="column1">
    <h3>Test</h3>
    <label for="pair">Name/Value Pair</label></br>
    <input type='text' id='my-text-box' value="Name=Value" />
    </br>
    </br>
    </br>

    <label for="pairs">Name/Value Pair List</label></br>
    <textarea rows="30" cols="80">
    some stuff
    </textarea>
</div>
<div id="column2">
    <button type="button">Add</button><br><br>
    <button type="button">Sort by Name</button><br><br>
    <button type="button">Sort by Value</button><br><br>
    <button type="button">Delete</button><br><br>
    <button type="button">Show XML</button><br><br>
</div>

CSS：

#my-text-box {
     font-size: 18px;
     height: 1.5em;
     width: 595px;
}

#container {
      width: 1005px;
      margin: 0 auto;
}

#column1, #column2 {
     border: 1px solid white;
     float: left;
     min-height: 450px;
     color: white;
}

#column2 {
      padding-top:80px;
      padding-left:10px;
}

我还在这里编辑了你的jsfiddle：https://jsfiddle.net/oocgkuh6/2/

快乐编码......

Answer 5

您可以使用简单HTML

执行此操作

HTML

＆＃13;

    <table>
    <tbody>
        <tr>
            <td>
                <label for="pair">Name/Value Pair</label>
                <br/>
                <input type='text' id='my-text-box' value="Name=Value" />
            </td>
            <td>
                <button type="button">Add</button>
            </td>
        </tr>
        <tr>
            <td>
                <label for="pairs">Name/Value Pair List</label>
                <br />
                <textarea rows="30" cols="71">some stuff</textarea>
            </td>
            <td>
                <br/>
                <br/>
                <button type="button">Sort By Name</button>
                <br/>
                <br/>
                <button type="button">Sort By Value</button>
                <br/>
                <br/>
                <button type="button">Delete</button>
                <br/>
                <br/>
                <button type="button">Show XML</button>
                <br/>
                <br/>
            </td>
        </tr>
    </tbody>
    </table>

＆＃13;

将所有按钮对齐在一个html中

5 个答案: