CODEWITHSUNDEEP
htmlcss
Prashant
Prashant

Reputation: 69

Is there a way to make 3 form elements to be in one line?

Complete form code: https://codepen.io/pv8172/pen/RwrENYy

<div class="element-select">
                        <label class="title">Giving Schedule</label>
                        <div class="medium">
                            <span>
                                <select name="giftSelect" id="giftSelect">
                                    <option selected="selected" value="OneTime">Once</option>
                                    <option value="1">Monthly</option>
                                    <option value="3">Quarterly</option>
                                    <option value="6">Semi-annual</option>
                                    <option value="12">Annual</option>
                                </select>
                            </span>
                        </div>
                    </div>
                    <br>
                    <div style="float:left;" id="startDate" class="element-date">
                        <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate"
                            placeholder="Start Date" />
                    </div>
                    <div style="float:right;" id="totalOccurance" class="element-input">
                        <input
                            class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
                    </div>

Only 'total occurance' and 'start date' are in one line by using float lift,right. I used formoid to generate the form. I'm trying to align form name field: giftSelect,startDate,totalOccurance

I was able to get teh startDate & totalOccurance but not able to get the giftSelect.

Upvotes: 2

Views: 90

Answers (4)

DCR
DCR

Reputation: 15700

div{
width:30vw;
display:inline-block;
}
  <div class="element-select">
    <label class="title">Giving Schedule</label>
      <div class="medium">
        <span>
          <select name="giftSelect" id="giftSelect">
            <option selected="selected" value="OneTime">Once</option>
            <option value="1">Monthly</option>
            <option value="3">Quarterly</option>
            <option value="6">Semi-annual</option>
            <option value="12">Annual</option>
          </select>
        </span>
      </div>
    </div>
    <div id="startDate" class="element-date">
      <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate" placeholder="Start Date" />
    </div>
    <div id="totalOccurance" class="element-input">
      <input class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
  </div>

Upvotes: 1

Prahlad Yeri
Prahlad Yeri

Reputation: 3663

The other two posts answer the question succinctly using display:flex. If for some reason, you don't want to use flex (like browser compatibility or whatever) and want to do it the old style, you can do it by adding text-align:center to the container div and float properties for the others as follows:

.alignItems
{
  text-align:center;
}
.element-date {float:left;margin-top:-20px;}
.element-input {float:right;margin-top:-20px;}
<div class="alignItems">
  <div class="medium">
    <label class="title">Giving Schedule</label>
    <br/>
    <select name="giftSelect" id="giftSelect">
      <option selected="selected" value="OneTime">Once</option>
      <option value="1">Monthly</option>
      <option value="3">Quarterly</option>
      <option value="6">Semi-annual</option>
      <option value="12">Annual</option>
    </select>
  </div>
  <div id="startDate" class="element-date">
    <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate" placeholder="Start Date" />
  </div>
  <div id="totalOccurance" class="element-input">
    <input class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
  </div>
</div>

Codepen Link

Upvotes: 1

Asmoun
Asmoun

Reputation: 1747

change your HTML and Add the following CSS :

#myDiv {
  display: flex;
  align-items: center;
}
<div id="myDiv">
  <div class="element-select">
    <label class="title">Giving Schedule</label>
      <div class="medium">
        <span>
          <select name="giftSelect" id="giftSelect">
            <option selected="selected" value="OneTime">Once</option>
            <option value="1">Monthly</option>
            <option value="3">Quarterly</option>
            <option value="6">Semi-annual</option>
            <option value="12">Annual</option>
          </select>
        </span>
      </div>
    </div>
    <div id="startDate" class="element-date">
      <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate" placeholder="Start Date" />
    </div>
    <div id="totalOccurance" class="element-input">
      <input class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
  </div>
</div>

Upvotes: 2

Ferin Patel
Ferin Patel

Reputation: 3998

using flex property you can make 3 elements align in one row

.alignItems
{
  display:flex;
  justify-content:space-evenly;
  align-items:center;
}
<div class="alignItems">
  <div class="medium">
    <label class="title">Giving Schedule</label>
    <br/>
    <select name="giftSelect" id="giftSelect">
      <option selected="selected" value="OneTime">Once</option>
      <option value="1">Monthly</option>
      <option value="3">Quarterly</option>
      <option value="6">Semi-annual</option>
      <option value="12">Annual</option>
    </select>
  </div>
  <div id="startDate" class="element-date">
    <input class="large" data-format="yyyy-mm-dd" type="date" id="DonDate" name="startDate" placeholder="Start Date" />
  </div>
  <div id="totalOccurance" class="element-input">
    <input class="large" type="text" id="totOcc" name="totalOccurance" placeholder="Total Occurrence" />
  </div>
</div>

Upvotes: 1

Related Questions