标签，输入 - 共享 space (class/div)

Question

我有很简单的事情要做，但我找不到出路。

假设我有表格，我想在另一个下面添加输入，但是其中一个旁边会有标签（仅在其中一个旁边）。

我想做到，所以所有类大小都相等（但要使其响应）。但是，我想在输入旁边加上标签，与标签共享 space，这样它将彼此相邻，如果用户在小屏幕中打开它，则不会一个在另一个下面。

希望你们明白我的意思。 :P

谢谢！

编辑

<div class="mainbox-form">
    <form>
        <div class="mainbox-input">
            <input type="text" name="store-name" placeholder="Name"><br>
        </div>

        <div class="mainbox-input">
            <input type="text" name="store-subdomain" placeholder="Subdomain">
            <label name="store-subdomain">.label.here</label><br>
        </div>

        <div class="mainbox-input">
            <input type="email" name="store-email" placeholder="Email"><br>
        </div>

        <div class="mainbox-input">
            <input type="password" name="store-password" placeholder="Password"><br>
        </div>

    </form>
</div>


.mainbox-form
{
    text-align: center;
    max-width: 50%;
    min-width: 350px;
    margin: 0 auto 0 auto;
}

.mainbox-input label
{
    font-weight: bold;
    color: #606060;
}

.mainbox-input
{
    max-height: 57px;
}

.mainbox-input input 
{
    background: #f3f3f3;
    width: 80%;
    border: none;
    color: #606060;
    margin: 3px auto 3px auto;
    padding: 15px 40px;
    font-size: 18px;
}


.mainbox-input input[name=store-subdomain]
{
    max-width: 59%;
}

.mainbox-input input:focus
{
    outline: none;
}

.mainbox-input input:active
{
    outline: none;
}

http://jsfiddle.net/twjw113w/

这是我目前获得的代码。我遇到的问题是，带标签的输入没有粘在左边，而且表现不同。我敢打赌你会在那里看到更好，而不是我会解释它。

Answer 1

您需要将 display: inline-block 和 width 添加到您希望在同一行的标签和输入元素。

    .mainbox-input label
{
    font-weight: bold;
    color: #606060;
    display:inline-block;
    width:35%;
}
.mainbox-input input[name=store-subdomain]
{
    max-width: 40%;
    display:inline-block;
}

这是你想要的吗？ jsfiddle

Answer 2

请删除下面的css 属性:

.mainbox-input{
     max-height: 57px;
}

修改下面的css：

.mainbox-input input[name=store-subdomain]{
     max-width:100%;
}
.mainbox-input input{
     width:auto;
     display:table
}
.mainbox-input label{
     display: table;
     padding: 0px 40px;
}

访问这个url： http://jsfiddle.net/sarowerj/e41653o4/

标签，输入 - 共享 space (class/div)

Label, Input - shared space (class/div)

html

css

shared

class