0
我需要讓我的項目看起來像附加的圖像。我在這個新的和掙扎。我錯過了什麼？我無法弄清楚如何放置我的文本框，並創建好的，甚至是間距。我無法在文本框之間創建間距
<--HTML-->
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="syntax">
<h3>Syntax Highlighting</h3>
<input type="radio" name=syntax value="Twilght"> Twilight
<br>
<input type="radio" name=syntax value="Solarized Dark"> Solarized Dark
<br>
<input type="radio" name=syntax value="Solarized Light"> Solarized Light
<br>
<input type="radio" name=syntax value="Tomorrow Night"> Tomorrow Night
<br>
<input type="radio" name=syntax value="Classic"> Classic
</div>
<div id="fonts">
<h3>Fonts</h3>
<select name="Code Font Family">
<option value=Monaco>Monaco</option>
<option value=Courier>Courier</option>
<option value=Inconsolata>Inconsolata</option>
<option value=Source Code Pro>Source Code Pro</option>
</select>
<br>
<select name="Code Font Size">
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=26>26</option>
</select>
</div>
<div id="bindings">
<h3>Key Bindings</h3>
<input type="radio" name=bindings value="Normal"> Normal
<br>
<input type="radio" name=bindings value="Sublime Text"> Sublime Text
<br>
<input type="radio" name=bindings value="Vim"> Vim
</div>
<br>
<div id="code">
<h3>Code Indentation</h3>
<input type="radio" name=syntax value="Spaces"> Spaces
<br>
<input type="radio" name=syntax value="Tabs"> Tabs
</div>
<div id="preprocessor">
<h3>Preprocessor & Library Defaults</h3>
HTML Preprocessor <select name="HTML Preprocessor">
<option value=Normal>Normal</option>
<option value=Markdown>Markdown</option>
<option value=Haml>Haml</option>
<option value=Slim>Slim</option>
<option value=Jade>Jade</option>
</select>
<br><br>
CSS Preprocessor <select name="CSS Preprocessor">
<option value=SCSS>SCSS</option>
<option value=Sass>Sass</option>
<option value=Less>Less</option>
<option value=Stylus>Stylus</option>
</select>
<br>
CSS Preprocessor Add-on <select name="CSS Preprocessor Add-on">
<option value=No Add-on>No Add-on</option>
<option value=Compass (for Sass)>Compass (for Sass)</option>
<option value=Bourbon (for Sass)>Bourbon (for Sass)</option>
<option value=Nib (for Stylus)>Nib (for Stylus)</option>
</select>
<br>
CSS Reset <select name="CSS Reset">
<option value=Neither>Neither</option>
<option value=Include Normalize>Include Normalize</option>
<option value=Include Reset>Include Reset</option>
</select>
<br>
Prefixing <select name="Prefixing">
<option value=Neither>Neither</option>
<option value=-prefix-free>-prefix-free</option>
<option value=Autoprefixer>Autoprefixer</option>
</select>
<br><br>
JS Preprocessor <select name="JS Preprocessor">
<option value=Normal>Normal</option>
<option value=CoffeeScript>CoffeeScript</option>
<option value=LiveScript>LiveScript</option>
<option value=Traceur>Traceur</option>
</select>
<br>
JS Library <select name="JS Library">
<option value=No Library>No Library</option>
<option value=jQuery>jQuery</option>
<option value=MooTools>MooTools</option>
<option value=Prototype>Prototype</option>
<option value=Angular>Angular</option>
</select>
<br>
Include Moderizer<input type="checkbox" name="Modernizer" value="Modernizer"><br>
Auto Update Preview<input type="checkbox" name="Preview" value="Preview"><br>
</div>
<div id="editor">
<h3>Editor Options</h3>
Line Numbers <input type="checkbox" name="Line Numbers" value="Line Numbers"><br>
Line Wrapping <input type="checkbox" name="Line Wrapping" value="Line Wrapping"><br>
Code Folding <input type="checkbox" name="Code Folding" value="Code Folding"><br>
Match Brackets <input type="checkbox" name="Match Brackets" value="Match Brackets"><br>
</div>
</body>
<---CS--->
body {background-color: grey;}
div {background-color: black; color: white}
#preprocessor {float: left; width: 48%; padding: 10px; clear: left; margin-left: inherit; text-align: right}
#bindings {float: left; width: 48%; padding: 10px; clear: left; margin-left: inherit}
#syntax {float: left; width: 48%; padding: 10px; clear: right; margin-left: inherit}
#fonts {float: right; width: 48%; padding: 10px; margin-right: inherit}
#code {float: right; width: 48%; padding: 10px; margin-right: inherit}
#editor {float: right; width: 48%; padding: 10px; margin-right: inherit}