0

我在使用 CSS 以我想要的方式对齐表单元素时遇到问题。

这就是我需要的:

名字姓:

电子邮件: 联系电话:

评论:

我得到的是它们都在彼此之下,例如:

姓名:

姓:

电子邮件:

联系电话:

评论:

我已将名称和电子邮件元素分隔到一个 div 中,将姓氏和联系号码分隔到一个 div 中,并将评论分隔到一个 div 中。再多的浮动、清理或定位都不会将它们移动到我想要的方式。

这是我的html:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>only.furniture</title>
<link href="Implement files/CSS/imdsite.css" rel="stylesheet" type="text/css" />
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('Implement files/Images/products_rollover.png','Implement files/Images/about_rollover.png','Implement files/Images/location_rollover.png','Implement files/Images/home_rollover.png','Implement      files/Images/location_rollover.png')">

<div id="container">

        <div id="header">
            <div id="logo"> 
                <a href="home.html">
                <img src="Implement files/Images/logo.png" />
                </a>
            </div><!--HEADER CLOSING DIV-->

            <div id="navigation">
              <div id="home">
              <a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','Implement files/Images/home_rollover.png',1)"><img src="Implement files/Images/home.png" name="home" width="169" height="58" border="0" id="home2" /></a></div><!--HOME CLOSING DIV-->

              <div id="about">
              <a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','Implement files/Images/about_rollover.png',1)"><img src="Implement files/Images/about.png" width="158" height="57" id="Image11" /></a>          
              </div><!--ABOUT CLOSING DIV-->

              <div id="products">
                    <a href="products.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','Implement files/Images/products_rollover.png',1)"><img src="Implement files/Images/products.png" width="153" height="57" id="Image12" /></a>
                    <map name="Map" id="Map">
                      <area shape="rect" coords="36,20,113,45" href="products.html" alt="products" />
                </map>                  
              </div><!--PRODUCTS CLOSING DIV-->

              <div id="location">
                    <a href="location.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Implement      files/Images/location_rollover.png',1)"><img src="Implement files/Images/location.png" name="Image21" width="152" height="57" border="0" id="Image21" /></a>
              </div><!--LOCATION CLOSING DIV-->

              <div id="contact">
                <img src="Implement files/Images/contact_rollover.png" />
            </div><!--CONTACT CLOSING DIV-->
        </div><!--HEADER CLOSING DIV-->

        <div id="banner">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="970" height="195">
              <param name="movie" value="Implement files/Media/banner.swf" />
              <param name="quality" value="high" />
              <param name="wmode" value="opaque" />
              <param name="swfversion" value="11.0.0.0" />
              <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
              <param name="expressinstall" value="Scripts/expressInstall.swf" />
              <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
              <!--[if !IE]>-->
              <object type="application/x-shockwave-flash" data="Implement files/Media/banner.swf" width="970" height="195">
                <!--<![endif]-->
                <param name="quality" value="high" />
                <param name="wmode" value="opaque" />
                <param name="swfversion" value="11.0.0.0" />
                <param name="expressinstall" value="Scripts/expressInstall.swf" />
                <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
                <div>
                  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
                  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
              </div>
                <!--[if !IE]>-->
            </object>
              <!--<![endif]-->
          </object>
        </div><!--BANNER CLOSING DIV-->

        <div id="contact_tagline">
            <h4>Contact us to book an appointment to view our catalogue and collections.</h4>
        </div> <!--TAGLINE CLOSING DIV-->

  <div id="contact_second">

    <div id="contact_block1">
        <h3>Please note that our complete range and collection will not be viewable, as many of our designs are still design
        concepts. Sample <br />colours can be shown as well as examples and photos of our work.
        <p>Phone: 011-453-7530<br />
        E-Mail: <a href="#">info@onlyfurniture.co.za</a><br />
      </p></h3>
    </div><!--CONTACT_BLOCK1 CLOSING DIV-->

    <div id="contact_block2">
        <div id="contact_block2_image">
            <img src="Implement files/Images/contact_image.jpg" />
        </div><!--CONTACT_BLOCK2_IMAGE CLOSING DIV-->

        <div id="contact_block2_text">
            <h4>Questions or Queries?</h4> <h3>If you have any questions, queries, complaints or suggestions,
            give us a call, email us or fill in your details below and we’ll get 
            back to you as soon as we can.</h3>
        </div><!--CONTACT_BLOCK2_TEXT CLOSING DIV-->

       <div id="about_form">
        <div id="about_form_left">
         <form action="index.php">
              <h5> Name:<Br />
            <input type="text" name="your_name" /> 
            </h5>

          <h5> Email:<Br />
            <input type="text" name="your_name" /> 
            </h5>

            <div id="about_form_right">
            <h5> Surname:<Br />
            <input type="text" name="your_name" /> 
            </h5>

            <h5> Contact number:<Br />
            <input type="text" name="your_name" /> 
            </h5>
            </div><!--ABOUT_FORM_RIGHT CLOSING DIV-->

            <div id="about_form_comment">
             <h5> Comment:<Br />
              <textarea rows="5" cols="50"></textarea>
             </h5>

             <h5>
             <input type="submit" value="Submit" name="submit">
             </h5>
          </div><!--ABOUT_FORM_COMMENT CLOSING DIV-->



            </form>
       </div><!--ABOUT_FORM CLOSING DIV-->
    </div> <!--CONTACT_BLOCK2 CLOSING DIV-->
  </div><!--CONTACT_SECOND CLOSING DIV-->



        <div id="footer">
            <img src="Implement files/Images/footer.jpg" border="0" usemap="#Map5" />
            <map name="Map5" id="Map5">
              <area shape="rect" coords="8,17,41,50" href="www.facebook.com/only_furniture" alt="facebook" />
              <area shape="rect" coords="45,17,78,50" href="www.twitter.com/only_furniture" alt="twitter" />
              <area shape="rect" coords="623,23,662,42" href="home.html" alt="home" />
              <area shape="rect" coords="683,25,724,41" href="about.html" alt="about" />
              <area shape="rect" coords="746,26,800,40" href="products.html" alt="products" />
              <area shape="rect" coords="827,25,881,41" href="location.html" />
<area shape="rect" coords="82,17,115,50" href="feed.onlyfurniture.com" alt="rss" />
            <area shape="rect" coords="911,25,958,42" href="contact.html" alt="contact" />
          </map>
    </div><!--FOOTER CLOSING DIV-->
</div><!--CONTAINER CLOSING DIV-->


<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

这是我的 CSS:

#container {
    background-color: #FFF;
    height: 1060px;
    width: 990px;
    margin: auto;
}
#header {
    background-color: #FFF;
    height: 57px;
    width: 990px;
}
#logo {
    background-color: #FFF;
    height: 57px;
    width: 185px;
    margin-left: 10px;
    float: left;
}
#banner {
    height: 195px;
    width: 970px;
    margin-right: 10px;
    margin-left: 10px;
    clear: both;
}
#location {
    float: left;
    height: 57px;
    width: 153px;
    clear: none;
}
#contact {
    float: left;
    height: 57px;
    width: 155px;
    margin-right: auto;
    clear: none;
}


#tagline {
    width: 970px;
    height: 90px;
    margin-right: 10px;
    margin-left: 15px;
    margin-top: auto;
}


#second {
    height: 504px;
    width: 779px;
    margin-right: 107px;
    margin-left: 107px;
    clear: none;
    border: thin solid #0fb5b1;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #0fb5b1;
    text-decoration: none;
    font-weight: normal;
    margin-left: 125px;
    margin-top: 40px;
    margin-right: 125px;
    letter-spacing: 1.2px;
    text-align: left;
}
h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: normal;
    text-decoration: none;
    color: #666666;
    margin-top: 63px;
}
h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
}

h4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: none;
}
h5 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
}
#footer {
    height: 63px;
    width: 970px;
    margin-top: 47px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 12px;
    border: thin solid #0fb5b1;
    clear: both;
    float: left;
}

#block1 {
    float: left;
    height: 504px;
    width: 393px;
}
#ruet_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: 190px;
    margin-right: 10px;
    float: left;
    text-align: center;
    padding-top: 10px;
}
#cubes_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: 180px;
    float: right;
    text-align: center;
    padding-top: 6px;
}

#second a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: underline;
}

#second a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: underline;
}

#second a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: underline;
}

#block1_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: auto;
    text-align: center;
    padding-top: 10px;
}


#block2_image {
    height: 255px;
    width: 200px;
    float: left;
}


#block2 {
    float: right;
    height: 504px;
    width: 380px;
    clear: none;
}

#block2_text {
    float: right;
    height: 250px;
    width: 380px;
}
#home {
    float: left;
    height: 57px;
    width: 171px;
}
#about {
    float: left;
    height: 57px;
    width: 158px;
}
#products {
    float: left;
    height: 57px;
    width: 153px;
}
#text {
    height: 284px;
    width: 361px;
}
#chair {
    float: left;
    height: 221px;
    width: 152px;
}
#cubes {
    float: right;
    height: 221px;
    width: 209px;
}
#block2_chair {
    float: left;
    height: 146px;
    width: 188px;
    margin-left: 5px;
}
#block2_cubes {
    float: right;
    height: 146px;
    width: 180px;
}
#about_tag {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: none;
    float: none;
    text-align: center;
    padding-bottom: 20px;
    margin-left: 150px;
    width: 700px;
    height: 50px;
}
#about_second {
    border: thin solid #0fb5b1;
    height: 560px;
    width: 928px;
    margin-left: 30px;
    float: none;
    margin-right: auto;
}
#about_block1 {
    height: 520px;
    width: 440px;
    float: left;
    clear: both;
}

#about_block1_text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: none;
    height: auto;
    width: auto;
    padding-left: 48px;
    padding-top: 5px;
}
#about_block2 {
    height: 550px;
    width: 500px;
    float: right;
    margin-left: 30px;
}
#about_block2_image {
    float: left;
    height: 255px;
    width: 475px;
}
#about_block2_text {
    float: left;
    height: auto;
    width: 440px;
    clear: both;
    margin-top: 10px;
    margin-left: 47px;
}
#contact_tagline {
    text-align: center;
}
#contact_second {
    border: thin solid #0fb5b1;
    height: 550px;
    width: 965px;
    margin-left: 14px;
    float: left;
    margin-right: auto;
    clear: both;
}

#contact_block1 {
    height: 114px;
    width: 948px;
    float: left;
    clear: both;
    padding-left: 30px;
}


#contact_block1 a:link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: underline;
}

#contact_block1 a:visited {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #0fb5b1;
    text-decoration: underline;
}

#contact_block1 a:hover {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    text-decoration: underline;
}
#contact_block2 {
    float: left;
    height: 420px;
    width: 950px;
    clear: none;
}
#contact_block2_image {
    float: left;
    height: 374px;
    width: 500px;
    padding-top: 35px;
    clear: none;
}

#contact_block2_text {
    height: 125px;
    width: 415px;
    clear: none;
    float: right;
}
#about_form {
    height: 280px;
    width: 400px;
    float: right;
    clear: none;
}
#about_form_left {
    height: 120px;
    width: 150px;
    float: left;
    position: relative;
    padding-top: 35px;
}
#about_form_right {
    float: right;
    height: 150px;
    width: 150px;
    clear: right;
}



#about_form_comment {
    height: 201px;
    width: 415px;
}

我设法让它们出现在彼此的下方,这是以前没有发生过的。但我似乎无法让他们成为我需要他们成为的样子。

有人可以帮帮我吗?

4

2 回答 2

2

目前您有:

 <h5> Name:<Br />
            <input type="text" name="your_name" /> 
            </h5>

删除<br/>得到:

 <h5> Name:
                <input type="text" name="your_name" /> 
                </h5>

工作得很好:

http://jsfiddle.net/VSRSE/

于 2012-09-04T23:35:34.273 回答
0

重新排列 div 和样式

h5
{
     display: inline-block
}

应该可以正常工作,尽管您还必须增加包含它们的 div 的宽度,因为现在它们将宽度限制为单列。他们不能都适合。

更新的演示(删除了宽度):http: //jsfiddle.net/wFKQT/2/

于 2012-09-04T20:16:24.750 回答