Wählen Sie Feld Ausrichtung
Wie konnte ich richten Sie die select-box, so dass seine inline mit den anderen? Ich bin auch versucht, dies zu tun mit der 3 option Eingabe-Boxen.
CSS:
#newwebsiteSection, #websiteredevelopmentSection, #otherSection{
display:none;
}
#newwebsiteForm form{
padding:10px;
margin:10px 0;
width:480px;
position: relative;
}
#newwebsiteForm label{
display:block;
float:left;
clear:both;
margin:0 15px 0 25px;
width:240px;
border:1px solid green;
}
#newwebsiteForm input{
display:block;
float:left;
width:240px;
height:15px;
}
#newwebsiteForm .radioButton {
width:15px;
height:15px;
}
#newwebsiteForm .radioText {
display:block;
width:30px;
height:20px;
float:left;
font-size:12px;
border:1px solid red;
}
#newwebsiteForm select{
margin-left:123px;
}
#newwebsiteForm #color1,#color2,#color3,#fav1,#fav2,#fav3{
display:block;
float:left;
margin-left:25px;
background-color:red;
}
#newwebsiteForm textarea{
display:block;
float:left;
}
HTML:
<section id="content">
<h1>Free Quote</h1>
<p>Please fill out the below questionnaire to receive your free web development quote</p>
<form action="#" method="post">
<select name="requiredOption" id="requiredOption">
<option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
<option id="newwebsite" value="newwebsite">New Website</option>
<option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
<option id="other" value="other">Other</option>
</select>
</form>
<div id="newwebsiteSection">
<form action="#" id="newwebsiteForm" method="get">
<fieldset>
<label>Do You Require Hosting?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label>Do You Require A Domain?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label>Do You Have A Logo?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label for="domain">What is your Domain?</label>
<input type="url" id="domain" value="http://example.com"/>
<label for="newwebsiteType">Type of site Required?</label>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
<label>Do You Require A Design?</label>
<span class="radioText">Yes</span><input class="radioButton" type="radio" name="Yes" value="Yes"/>
<span class="radioText">No</span><input class="radioButton" type="radio" name="No" value="No"/>
<label>Three Favorite colors?</label>
<input id="color1" value=""/>
<input id="color2" value=""/>
<input id="color3" value=""/>
<label>What are your favorite websites?</label>
<input type="text" id="fav1" value=""/>
<input type="text" id="fav2" value=""/>
<input type="text" id="fav3" value=""/>
<label for="comments">Comments?</label>
<textarea name="comments" id="comments"></textarea>
<input type="submit" name="submit" value="Send Quote Request"/>
</fieldset>
</form>
</div>
<div id="websiteredevelopmentSection">
<p>Website Redevelopment</p>
</div>
<div id="otherSection">
<p>Other</p>
</div>
</section>
Kannst du ein screenshot von dem, was Sie sehen, bitte? Mein Gehirn kommt nicht mit einem HTML-rendering-engine gebaut, obwohl man Sie kaufen kann heutzutage.
Getan, ich bin auch versuchen, richten Sie die input-Boxen
Getan, ich bin auch versuchen, richten Sie die input-Boxen
InformationsquelleAutor Jess McKenzie | 2011-09-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Css Formular-Selektor ist falsch.
sollte nur
Ich veränderte Ihre html-und css-leicht erhalten Sie dieses layout:
html - wrap-label/input-Paare in einem div. Dies hilft sehr viel mit styling. Hosting und Domain-Paare gewickelt sind, so dass IE7 zeigt Sie auf einer neuen Zeile.
Den .form-Feld-Klasse richtet die Eingänge. Äußere Hülle wieder hilft IE7 Formatierung.
css
Demo: http://jsfiddle.net/mjcookson/GTd9J/
Prost 🙂
InformationsquelleAutor marissajmc