Geek asks and answers

Remove line break after <label>

My form is formatted using a 2-column table. In the left column I use <label>and in the right column a <input type="text">. Some of the input fields are required. Therefore, the requirement is that for all forced inputs there should be a red asterisk next to the label. However, the label is designed so that it always follows a line break, so the asterisk automatically goes under it. What is the best way to make sure this does not happen and the star is in the right place next to the label? I do not think the option <div float="left>will work in the table. This is the code as requested;

<tr>
                <td class="leftCell"><span style="white-space: nowrap;"><label for="Subcontractor_CompanyName">Company</label><span style="display: inline;" class="errorHighlight">*</span></span></td>
                <td class="rightCell"><input style="width: 300px;" id="Subcontractor_CompanyName" name="Subcontractor.CompanyName" value="096 club" type="text" data-val-required="Must enter the Company Name" data-val="true">
                    <span class="field-validation-valid" data-valmsg-replace="false" data-valmsg-for="Subcontractor.CompanyName">*</span></td>
            </tr>

My attempt to use <span style="white-space: nowrap;">failed.

+6
source share
4

, <label> , :

label {display: inline;}
+15

, .

- :

<label>Name:<sup>*</sup></label>
<input type="text" name="name" />

CSS:

label sup { color: red; }

: http://jsfiddle.net/ByGVE/

+3

The shortcut will not be displayed by default by default CSS and is wide enough to hold the input next to it, start a new line.

You probably have CSS that sets display: blockon the shortcut. Set instead to the input.

+2
source

Use style = "white-space: pre-wrap;"

0
source

More articles:


All Articles