Question

我已经在SO上找了很多线程并试图实现这一点，但到目前为止还没有。我想在同一行添加标签和输入字段..这很简单，但却无法理解。

我所拥有的就是这个简单的表格

<section id="container">

<form name="hongkiat" id="hongkiat-form" method="post" action="#">

<div id="wrapping" class="clearfix">

<section id="aligned">

    <div class="block">
          <label for="name">Full Name</label>
          <input type="text" name="name" id="name" placeholder="Full Name" autocomplete="off" tabindex="1" class="txtinput">
    </div>
    <div class="block">
        <label for="email">Email Address</label>
        <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="2" class="txtinput">
    </div>
    <div class="block">
        <label for="message">Statement</label>
        <textarea name="message" id="message" placeholder="Statement" tabindex="5" class="txtblock"></textarea>
    </div>
        </section>

    </div>
    <section id="buttons">
        <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
    </section>
    </form>
</section>

css有点长了，我在这里添加标签和字段的部分，我已经尝试了

#hongkiat-form { box-sizing: border-box; }

#hongkiat-form .txtinput { 
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    margin-bottom: 20px;
    font-size: 1.55em;
    padding: 11px 25px;
    width: 90%;
    color: #777;
  float: right;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#wrapping { width: 100%; box-sizing: border-box; }

.block label {
  display: inline-block;
  width: 40px; 
  float:left;
    font-family: "Droid Serif", Georgia, serif;
    font-size: 1.4em;
    line-height: 1.8em;
    font-weight: 500;  
}

以下是现在的完整演示：https://jsfiddle.net/9gmt8rcd/

请指导我在这里需要改变什么？

Answer 1

您的代码已尝试将标签和输入放在同一行，但您的输入width: 90%使其太大，因此它会转到另一行。尝试减少输入的宽度，它会起作用。例如，尝试减少您的输入＆＃39; width至70%，并将您的标签贴上＆＃39; width改为160px而不是40px。

同一行上的标签和输入字段

1 个答案: