Question

我需要让我的项目看起来像附加的图像。我是新人并在努力奋斗。我错过了什么？我无法弄清楚如何在我的文本框中放置空间并创建漂亮，均匀的间距。

<--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}

Answer 1

html正文应该像下面的代码一样进行编辑。

<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>
        <table border="0">
            <tr>
                <td align="right" width="360">HTML Preprocessor </td>
                <td>
                    <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>
                </td>
            </tr>
            <tr>
                <td align="right">CSS Preprocessor</td>
                <td>
                    <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>
                </td>
            </tr>
            <tr>
                <td align="right">CSS Preprocessor Add-on</td>
                <td>
                    <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>
                </td>
            </tr>
            <tr>
                <td align="right">CSS Reset</td>
                <td>
                    <select name="CSS Reset">
            <option value=Neither>Neither</option>
            <option value=Include Normalize>Include Normalize</option>
            <option value=Include Reset>Include Reset</option>
        </select>
                </td>
            </tr>
            <tr>
                <td align="right"> Prefixing </td>
                <td>
                    <select name="Prefixing">
            <option value=Neither>Neither</option>
            <option value=-prefix-free>-prefix-free</option>
            <option value=Autoprefixer>Autoprefixer</option>
        </select>
                </td>
            </tr>
            <tr>
                <td align="right"> JS Preprocessor </td>
                <td>
                    <select name="Prefixing">
            <option value=Neither>Neither</option>
            <option value=-prefix-free>-prefix-free</option>
            <option value=Autoprefixer>Autoprefixer</option>
        </select>
                </td>
            </tr>
            <tr>
                <td align="right"> Prefixing </td>
                <td>
                    <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>
                </td>
            </tr>
            <tr>
                <td align="right"> Include Moderizer </td>
                <td>
                    <input type="checkbox" name="Modernizer" value="Modernizer">
                </td>
            </tr>
        </table>
        </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>

css文件应该像下面那样改变。

body {background-color: grey;}
div {background-color: black; color: white}
#preprocessor {float: left;
    width: 48%;
    padding: 10px;
    height: 281px;}
#bindings {float: left;
    width: 48%;
    padding: 10px;
    margin-bottom: 5px;
    height: 175px;}
#syntax {
    float: left;
    width: 48%;
    padding: 10px;
    clear: right;
    margin-bottom: 5px;
    height: 175px;}
#fonts {float: right;
    width: 48%;
    padding: 10px;
    height: 175px;
    margin-bottom: 5px;}
#code {float: right;
    width: 48%;
    padding: 10px;
    margin-bottom: 5px;
    height: 175px;}
#editor {float: right;
    width: 48%;
    padding: 10px;
    height: 281px;}

我无法在文本框之间创建间距

1 个答案: