CODEWITHSUNDEEP
htmlcss
shinyidol
shinyidol

Reputation: 59

trouble with labels in css. can't edit html

I need to align fields with their labels, all in 1 straight horizontal line. I'd normally fix this in the HTML, but I can't edit it, so I need it to be fixed with CSS.

This is the jsfiddle demo: http://jsfiddle.net/83hxF/

My HTML:

  <label for="field_21770004">name</label>
  <input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
  <div id="field_21770004_errors" class="validation error"></div>
    <label for="field_21927140">depart</label>
    <select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
  <div id="field_21927140_errors" class="validation error" style="display: none;"></div>
    <label for="field_21769174">platform</label>
    <select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
  <div id="field_21769174_errors" class="validation error"></div>

My CSS:

#field_21770004 {
    width: 150px;
}

#field_21927140 {
    position: absolute;
    top: 10px;
    left: 250px;
}

#field_21769174 {
    position: absolute;
    top: 10px;
    left: 350px;
}

Upvotes: 1

Views: 253

Answers (3)

Nikita 웃
Nikita 웃

Reputation: 2060

There are several ways that you can do that, have them aligned vertically or horizontally.

1st method:

HTML:

<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>

CSS:

#field_21770004 {
    width: 150px;
    display:inline;
}

Demo: http://jsfiddle.net/83hxF/4/

2nd method:

HTML:

<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error" style="display:none";></div>

<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display:none";></div>

<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error" style="display:none";></div>

CSS:

#field_21770004 {
    width: 150px;
}
#field_21927140 {
    top: 10px;
    left: 250px;
}
#field_21769174 {
    top: 10px;
    left: 350px;
}

Demo: http://jsfiddle.net/83hxF/5/

3rd method: (Changing CSS only)

#field_21770004 {
    width: 150px;
}
#field_21927140 {
    top: 10px;
    left: 250px;
}
#field_21769174 {
    top: 10px;
    left: 350px;
}

#field_21770004_errors{
    display:none;
}

#field_21769174_errors{
    display:none;
}

Demo: http://jsfiddle.net/83hxF/15/

Upvotes: 1

Joe Taylor
Joe Taylor

Reputation: 579

Try floating the inputs/selects left and clearing right, and floating the labels left and clearing left.

input, select {
    float: left;
    clear: right;
}
label {
    float: left;
    clear: left;
}

Here's an updated fiddle: http://jsfiddle.net/ZHVpc/

Upvotes: 0

oelna
oelna

Reputation: 2446

It's not really clear to me what you mean. Align the labels where?

This is a solution that will align them in a tabular way, the label next to the input/select fields, each in their own line.)

label {
    display: inline-block;
    width: 6em;
}

.validation {
    margin-bottom: 2em;
}

(This assumes that the display: none; on the validation error field can be removed or altered. What is it there for in the first place? Can't this be done in the CSS file as well?)

Please try to explain a little better so I can be of better help.

Upvotes: 1

Related Questions