How to achieve MS word tab function in html/ css?


Tags: html,css

Problem :

Now I am writing a html file, which just want to duplicate the MS Word file outlook for further programming. However, how to achieve the following image?This one

At this stage, I can't make the two colons stand into same position, since I just use underscore. Thank you for your help.


Now I can only achieve this. By this code:

.box{float:left; margin-right:10px;}
input{border:0;border-bottom:1px solid #000;  background: transparent;
  outline: none;}
<div>
  <div class="box">
      <lable style="display:inline-block; min-width:50px;">Applicant’s signature</lable>
<span>:</span>
    <input type="text">
    </div>
  <div class="box">
      <lable style="display:inline-block; min-width:50px;">Date</lable>
<span>:</span>
    <input type="text">
    </div>
  <div class="box">
      <lable style="display:inline-block; min-width:50px;">Applicant’s name</lable>
<span>:</span>
    <input type="text">
    </div>

</div>

Thanks for your help!



Solution :

.box{float:left; margin-right:10px;}
lable{display:inline-block; min-width:50px;}
input{border:0;border-bottom:1px solid #000;}
<div>
  <div class="box">
      <lable>Date</lable>
<span>:</span>
    <input type="text">
    </div>
  <div class="box">
      <lable>Name</lable>
<span>:</span>
    <input type="text">
    </div>
  <div class="box">
      <lable>Name</lable>
<span>:</span>
    <input type="text">
    </div>
  <div class="box">
      <lable>Name</lable>
<span>:</span>
    <input type="text">
    </div>
</div>


    CSS Howto..

    How to find out DOM and CSS address to an element for Selenium?

    How to style differently only the first list item from unsorted list

    CSS hover - parents are affected, too. How to avoid this?

    How to hide a column in a DataGrid?

    Clickable dropdowns - How do they work?

    Font-family not showing correctly on my website

    How to create a Twitter Bootstrap Textarea

    How to get the image height of an image to set another div height

    How to auto position sidenav in twitter bootstrap while sliding

    How to addClass() at RANDOM to an element in jQuery?

    How to apply css inside a text that is either any html control or without any html control

    How To Change Text Box Content On Hover

    How to repeat multiple images over one element using CSS

    how to add class with animation?

    How to add CSS to an if else statement in PHP

    show,hide DIV with mouseover , mouseout

    How to Make Text Stay Inside Div?

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    How to prevent fixed image from scrolling down?

    How to move this circle using javascript?

    How to center a div tag in a html page without being affected by zooming

    How can I split a text in 2 color vertically?

    Showing/hiding content with jQuery

    How to create embossed borders in HTML, CSS? [closed]

    Is this how CSS LESS and SimpLESS work? [closed]

    How to blur the div below the section with CSS 3 without background image?

    How to change the link color of the current page with CSS

    How to change font color inside nav element?

    How can I add spaces between two lines using CSS?

    css: How to horizontal align fonts with different sizes