making this right in html_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-20 21:10 出处：网络

Hello i tried hard to make exactly like this: But it\'s difficult for me, and its not right at all. My boxes arent so perfect as in the image, and same with the text under it.

相关专题：css

Hello i tried hard to make exactly like this:

making this right in html

But it's difficult for me, and its not right at all. My boxes arent so perfect as in the image, and same with the text under it.

<table border="0" align="cen开发者_StackOverflowter" cellspacing="2" cellpadding="2" >
                    <tr >
            <td class="cell" style="color: #CCC; font-size: 10px;">
            <input type="text" value="Email"></td>
            <td class="cell" style="color: #CCC; font-size: 10px;">
            <input type="text" value="Lösenord"></td>
                    </tr>
                    <tr align="center" >
                    <td class="cell" style="color: #CCC; font-size: 10px;">Glömt lösenord</td>
                    <td class="cell" style="color: #CCC; font-size: 10px;">Kom ihåg</td>
                    </tr>
                </table>

What have I done wrong? / am i missing?

Hopefully this gets you started. The layout is easier to manage this way. Use CSS to position elemnts and divs as necessary.

<html>
<head>
<style>
   body {
     color: #CCC; 
     font-family: Arial;
     font-size: 12px;
     background-color: #000000;
   }
   #check {
     margin-left: 14px;
     margin-top: 5px;
   }
   #left,  #right {
     margin: 1px;
     float:left;
   }
   #leftspan, #rightspan {
     margin: 1px;
     margin-top: 8px;
     float:left;
   }
   #leftinput, #rightinput {
     display:block;
   }
</style>
</head>
<body>
  <div id="left">
    <input id="leftinput" type="text"  value="Password" />
    <span id="leftspan">GLEMT ADGANGSKODE</span>
  </div>
  <div id="right">
    <input id="rightinput" type="text"  value="Email" />
    <span id="rightspan">HAII MIG INLOGGAD</span>
     <input id="check" type="checkbox">
  </div>
</body>
</html>