Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
223 views
in Technique[技术] by (71.8m points)

html - Can't get text box on same line as checkbox

I have a form with a checkbox section. The last option is a text field for a custom entry, but I can't get the field onto the same line as the checkbox.

Picture for reference

HTML (I included the option before it as well for reference):

                <li>
                    <label class="container">Legal
                        <input id="legal" name="legal" type="checkbox" value="1">
                        <span class="checkmark" class="square"></span>
                    </label>
                </li>

                <li>
                    <label class="container">
                        <input id="other" name="other" type="checkbox" value="1">
                        <span class="checkmark" class="square"></span>
                    </label>
                    <input id="otherText" maxlength="40" name="otherText" size="10" type="text" placeholder="Other...">
                    <span class="bar" style="width: 150px;"></span>
                </li>

CSS:

#otherText{
        font-size:.9em;
        width: 150px;
        display:block;
        border:none;
        color: #fff;
        background-color: transparent;
        border-bottom:1px solid #757575;
}

#otherText:focus { outline:none; }
question from:https://stackoverflow.com/questions/65910192/cant-get-text-box-on-same-line-as-checkbox

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
        <li>
                <input id="legal" name="legal" type="checkbox" value="1">
           <label class="container">Legal
                <span class="checkmark" class="square"></span>
            </label>
        </li>

        <li>
            <label class="container">
                <input id="other" name="other" type="checkbox" value="1">
                <span class="checkmark" class="square"></span>
            </label>
            <input id="otherText" maxlength="40" name="otherText" size="10" type="text" placeholder="Other...">
            <span class="bar" style="width: 150px;"></span>
        </li>

CSS -

   li {
      display: flex;
    }

enter image description here

Does this help?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...