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..

    JQuery with IE reading inherted css property, how to prevent?

    How to get inputs in the same line with css?

    How to define a document in javascript? WebStorm

    How to find a first td in a tr using tr class name in CSS? [duplicate]

    How to change/add CSS inside of iframe by jQuery

    css how to make two div side by side

    How do I expand this CSS list?

    How to center bootstrap navba-nav on scroll when fixed?

    How to float inline elements with css

    css menu active sub links to show on parent link

    CSS - fluid design, how to correctly position right floats below the opposing element?

    How to see CSS boxes in firefox inspector

    How to simplify cross-browsing css animation keyframe?

    How can i make this css star smaller?

    webkit animation play state: how to start/stop animation on demand with javascript

    How to make the transitions in my css work

    How to figure out the CSS bugs?

    How to vertical center ordered list-navigation

    How to assign custom CSS class to arbitrary arbitrary rows of h:dataTable?

    Show/hide without using CSS

    How to create this type of element using XHTML & CSS?

    How does JS DOM manipulation affect CSS rule matching?

    How to make multiple gradient work with CSS

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    How to Center Rotated text with CSS

    How do I add a “popup” shadow to an HTML element

    How to prevent css keyframe animation on page load?

    How to draw lines in ionic

    How to add CSS to page to the bottom of the custom chrome extension