Html Question posted in
Some basic documentation can be found here.

How to align text in html?

I am having trouble in aligning text in textbox. I want to know how to align text like in the picture below.

<div class="textbox-container" class="form-inline">
  <div class="image">
    <img src="wwwroot/image/{{ data.Icon }}" alt="{{data.Id}}" />
  </div>
  <input id="item" type="text" value="CornFlower">
  <input id="variety" type="text" value="Floral ">
  <div>
    <input id="botanical" type="text" value="Centaurea ">
  </div>
</div>

code link

expected output

Tags:

2

Answers


  1. 0

    Make the textbox flex and use the flexbox justify-content to align the children horizontally. You can nest the flexbox containers to reach the multiline structure you would like to create.

    Set on the parent (container) element:

    display: flex;
justify-content: flex-start; // experiment with the value here

    Check that one for more information:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-justify-content

    Login or Signup to reply.
  2. 0

    You can achieve that using display:flex and flex-direction either column or row as below. (I added padding and background color to better show each wrapping div). Lastely if you want the #botanical input to fill the whole line just uncomment the commented line.

    .textbox-container{
  padding: 5px;
  display: flex;
  flex-direction: row;
  background-color: blue;
}

.inputs-right-column{
  padding: 5px;
  display: flex;
  flex-direction: column;
  background-color: red !important;
}

.inputs-right-rows{
  padding: 5px;
  display: flex;
  flex-direction: row;
  background-color: yellow;
}

.bota{
  display: flex;
  /* flex-direction: column; */
  padding: 5px;
  background-color: blueviolet;
}
      <div class="textbox-container" class="form-inline">
    <div class="image-left">
      <img src="https://fastly.picsum.photos/id/25/5000/3333.jpg?hmac=yCz9LeSs-i72Ru0YvvpsoECnCTxZjzGde805gWrAHkM" width="60px" />
    </div>
    <div class="inputs-right-column">
      <div class="inputs-right-rows">
        <input id="item" type="text" value="CornFlower">
        <input id="variety" type="text" value="Floral ">
      </div>
      <div class="bota">
        <input id="botanical" type="text" value="Centaurea ">
      </div>
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search