Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove the line break after a <label>

Tags:

html

My form is formatted by a 2 column table. In the left column I use a <label> and in the right column a <input type="text">. Some of the input boxes are required. So the requirement is that for all the compulsary inputs, there should be a red asterisk next to the label. However a label is designed so that it is always followed by a line break, so the asterisk automatically goes underneath. What is the best way of making sure this does not happen, and the asterisk goes in the correct place next to the label? I do not think the <div float="left> option would work in a 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 at using a <span style="white-space: nowrap;"> failed.

like image 974
arame3333 Avatar asked Jan 30 '13 15:01

arame3333


People also ask

How do I remove space between label and input?

If you have no margin or padding applied and you still have this space, you could either use display: flex on the parent or display: block/inline-block on the label to get rid of these. Both label and input are display: inline , per default, so margin and padding bottom or top should not affect them.

How do you stop a line from breaking?

If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).

How do you display a label with text with line breaks?

Answers. You can use string. replace() method on the string value of the text box which will show line breaks on the web page.

How do you remove a line break in CSS?

Remove <br> Line Break with CSS and Replace with Space To do this we'll use CSS to change the content of the br tag which will prevent it from making a line break. Then we'll also add content using the :after pseudo-element. That will ensure the <br> tag is replaced with a space.


1 Answers

Or, if they have given the <label> as block, you can do this way:

label {display: inline;}
like image 144
Praveen Kumar Purushothaman Avatar answered Oct 24 '22 12:10

Praveen Kumar Purushothaman