Question

请帮帮我我花时间试图找出为什么joinform div不能很好地放在包含myhomepageimage.jpg图像的div旁边。
我以为是形式的width “立即注册加入网站”非常完美，但表格位于图片下方我错过了什么另外，我是CSS的新手，所以请容忍我的愚蠢谢谢！

<style type="text/css">
body {
background-image: url(bg.jpg);
background-attachment: fixed;
}
.styled-button-10 {
background:#5CCD00;
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00;
text-decoration: none;
}
#header {
width: 990px;
height: 75px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
}
#logo {
float:left;
}
#topmenu {
float:right;
}
#topmenu li {
margin-left:10px;
display:inline;
}
#intro {
width: 990px;
margin-left: auto;
margin-right: auto;
background-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.5);

padding:8px;
font-size:30px;
border:1px solid #e3e3e3;
}

#joinform {
width:550px:
float:right;
}
#details {
width: 990px;
margin-left: auto;
margin-right: auto;
}
</style>
<style type="text/css">
/* This CSS is used to format the page. */
fieldset {border:0px;}
#lbform {height: auto;margin: 0px auto;padding: 0;position: relative;width: 500px;}
#lbform label {color: #000000;display: inline;float: left;font-family:     Arial,Helvetica,sans-serif;font-size: 14px;font-weight: bold;margin: 5px 10px 5px 0;width: 90px;}
#lbform .row {display: block;margin-bottom: 7px;padding-top: 7px;width: 475px;}
#lbform input {border: 1px solid #9C8A7B;font-size: 14px;padding: 5px;width: 208px;}
#lbform select {border: 1px solid #9C8A7B;font-size: 14px;height: 25px;}
#lbform input.blur {color: #999999;font-style: italic;}
#lbform input.focus, #lbform input.complete {color: #000000;font-style: normal;font-weight: bold;}
.gender {width: 220px;}
.day {width: 63px;}
.month {width: 80px;}
.year {width: 70px;}
.note {color: #666666;font-family: Arial,Helvetica,sans-serif;font-size: 11px;position:relative;right: 0;top: -10px;width: 300px;}
</style>

<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {display: none;}
a.showLink, a.hideLink {cursor: pointer; display: block; height: 45px; margin: 5px 0 0 104px; width: 214px;}
a.hideLink {}
a.showLink:hover, a.hideLink:hover {}
</style>
<script src="jsforstep2.js"></script>
</head>
<body>
<div id="header">
<div id="logo"><a href="http://www.mysite.com"><img src="urlformylogo.png" alt="Hi Mom"></a><br>
</div>
<ul id="topmenu"><li><a href="#" class="styled-button-10">Join Now</a></li><li><a href="#" class="styled-button-10">Login Here</a></li></ul>
</div>
<div id="intro">
<div style="float:left; padding-right:10px; width:440px;"><img src="myhomepageimage.jpg">

</div>
<div id="joinform">
<div style="margin-top:0px;">Register now to join site</div>
<!-- Make sure you update the URL -->
<form id="lbform" class="formlayout" action="theformurl" method="post">
    <fieldset>
        <div class="magic">
            <input type="hidden" value="1" name="sexuality">
        </div>

        <div class="row cf">
            <label>I prefer:</label>
            <select class="gender" name="gender">
                <option>Please select</option>
                <option value="1">Cheese</option>
                <option value="2">Ham</option>
            </select>
        </div>

        <div class="row cf">
            <label>First name:</label>
            <input type="text" class="text blur" name="firstname">
        </div>

        <div class="row cf">
            <label>D.O.B.:</label>
            <select class="day" name="dobday">
                <option value="">Day</option>
                <option value="1">01</option>
                <option value="2">02</option>
            </select>

            <select class="month" name="dobmonth">
                <option value="">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
            </select>

            <select class="year" name="dobyear">
                <option value="">Year</option>
                <option value="1975">1975</option>
                <option value="1974">1974</option>
            </select>
        </div>

        <div class="continue-btn">
            <a onclick="showHide('example');return false;" class="showLink" id="example-show" href="#">
                <!-- The <p> tags below can be swapped from an image. -->
                <p>CONTINUE</p>
            </a>
        </div>

        <!-- Anything that sits in the div class=more will be hidden until the Continue link is clicked -->
        <div class="more" id="example">
            <div class="row cf">
                <label for="email">Email:</label>
                <input type="text" class="text blur" name="email" id="email">
            </div>

            <div class="row cf">
                <label for="password">Password:</label>
                <input type="password" value="" name="password" id="password">
            </div>
            <div class="row cf">
                <button class="header" type="submit">submit</button>
            </div>
            <div class="row cf">
                <p class="note">My TOS link</a>.</p>
            </div>
        </div>
    </fieldset>
</form>
</div>
</div>
<div id="details">
Some text here.
</div>
</body>
</html>

Answer 1

这很简单。有一个错字：

#joinform {
    width:550px*:*
    float:right;
}

将其更改为;

#joinform {  width:550px; float:right;    }

表格没有在图像旁边对齐，为什么不呢？

1 个答案: