个人中心
gpt4 book ai didi

html - 在格式化时遇到一些麻烦

转载 作者：太空宇宙 更新时间：2023-11-04 12:57:58 25 4
gpt4 key购买 nike

在格式化我的文件时遇到了一些问题，我认为我做得对，但我想不是。我想要宽度更长，上面的颜色是棕色的。我还希望我的单选按钮都在同一行上，并且像这样位于单词的左侧。

o School o College o University

我做错了什么？到目前为止，这是我的代码。

<!DOCTYPE html></Applications/MAMP/htdocs/site2/chapter04-project01.html>
<html>
    <head lang="en">
        <meta charset="utf-8">
        <title>Chapter 4</title>
        <link rel="stylesheet" href="reset.css" />
        <link rel="stylesheet" href="chapter04-project01.css" />
        <style>
            body {
                line-height: 1;
                margin: 100px 525px;
            }

            div {
                background: rgba(0, 0, 0, .1);
                border-radius: 5px;
                box-sizing: border-box;
                padding: 0px;
                width: 220px;
            }

            header {
                overflow: clear;
                position: relative;
            }

            cap {
                font-family: Georgia, Cambria, "Times New Roman", serif;
                font-size: 18px;
                font-weight: 700;
                margin: 0 0 10px;
                text-align: center;
            }

            button {
                position: absolute;
                bottom: -4px;
            }

            button:first-child {
                left: 0;
            }

            button:last-child {
                right: 0;
            }

            table {
                background: #fff;
                border-collapse: collapse;
                color: #222;
                font-family: 'Lucida Sans', Verdana, Arial, sans-serif;
                font-size: 13px;
                width: 100%;
            }

            td {
                border: 1px solid #ccc;
                color: #444;
                line-height: 22px;
                text-align: center;
            }

            tr:first-child td {
                color: #222;
                font-weight: 700;
            }

            .selected {
                background: #f0951d;
                border: 0;
                box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
            }

            fieldset {
                background:#B8860B
                color:#B8860B
                width:100%
            }
        </style>
    </head>
    <body style ="text-align:center;">
        <div>
            <header>
                <button>«Sep</button>
                <cap>October 2014</cap>
                <button>Nov»</button>
            </header>
            <table>
                <tr>
                    <td>S</td>
                    <td>M</td>
                    <td>T</td>
                    <td>W</td>
                    <td>T</td>
                    <td>F</td>
                    <td>S</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>19</td>
                    <td>20</td>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>26</td>
                    <td>27</td>
                    <td>28</td>
                    <td>29</td>
                    <td>30</td>
                    <td>31</td>
                    <td></td>
                </tr>
            </table>
            <footer>
                <button>«</button>
                <h2>      </h2>
                <button>»</button>
            </footer>
        </div>
        <form method="get" action="process.php">
            <fieldset>
                <legend>Meeting Details</legend>
                <p>
                    <label> Client Name: </label>
                    <input type="text" name="Client Name"/>
                </p>
                <p>
                    <label>First Meeting? </label>
                    <input type="checkbox"name="yes">
                </p>
                <p>
                    <label>Client type:</label>
                    <input type="radio" name="where" value="1">School<input type="radio" name="where" value="2">College <input type="radio" name="where" value="3">University
                </p>
            </fieldset>
        </form>
    </body>
</html>

fiddle > http://jsfiddle.net/9m5kekuc/

最佳答案

更新工作演示> http://jsfiddle.net/08k8m6eo/

问题 1: 只需将单选按钮包装在单独的 <div> 中将它们放在一行中。

更新代码:

       <p><label>Client type:</label></p>
       <div>
            <input type="radio" name="where" value="1" />
            <label>School</label>
            <input type="radio" name="where" value="2" />
            <label>College</label>
            <input type="radio" name="where" value="3" />
            <label>University</label>
        </div>

问题 2: 修复布局:

更新代码:HTML

<!--Added ID to the Calender DIV so you can give **style** for this particular DIV rather making it generic for all DIVs-->
<div id="calender"> 
    <header>
        <button>«Sep</button>
        <cap>October 2014</cap>
        <button>Nov»</button>
    </header>
    <table>
        <tr>
            <td>S</td>
            <td>M</td>
            <td>T</td>
            <td>W</td>
            <td>T</td>
            <td>F</td>
            <td>S</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
        </tr>
        <tr>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
        </tr>
        <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
        </tr>
    </table>
    <footer>
        <button>«</button>
         <h2>      </h2>

        <button>»</button>
    </footer>
</div>

<!--Wrapped the <form> in a separate <div>, again so you can give **style** for this particular DIV -->
<div id="meetingDetails">
    <form method="get" action="process.php">
        <fieldset>
            <legend>Meeting Details</legend>
            <p>
                <label>Client Name:</label>
                <input type="text" name="Client Name" />
            </p>
            <p>
                <label>First Meeting?</label>
                <input type="checkbox" name="yes" />
            </p>
            <p>
                <label>Client type:</label>
            </p>
<!--Wrapped the "Radio Buttons" in a separate <div>, so they come in a single line -->
            <div>
                <input type="radio" name="where" value="1" />
                <label>School</label>
                <input type="radio" name="where" value="2" />
                <label>College</label>
                <input type="radio" name="where" value="3" />
                <label>University</label>
            </div>
        </fieldset>
</div>

更新的 CSS

    body {
        line-height: 1;
        margin: 0 auto; /*FIX ADDED*/
        padding:0; /*FIX ADDED*/
        width:100%; /*FIX ADDED*/
    }

 /*FIX ADDED - Removed General DIV and gave style to the Calender ID */
    #calender {
        background: rgba(0, 0, 0, .1);
        border-radius: 5px;
        box-sizing: border-box;
        padding: 0px;
        width: 220px;
        text-align:center; /*FIX ADDED*/
        margin:0 auto; /*NEW FIX FOR CENTER BOX*/
    }

 /*FIX ADDED - Updated style to be Nested for Calender, so elements which are under "#calender" ID, only they get updated */

    #calender header {
        overflow: clear;
        position: relative;
    }
    #calender cap {
        font-family: Georgia, Cambria, "Times New Roman", serif;
        font-size: 14px; /*FIX ADDED*/
        font-weight: 700;
        margin: 0 0 10px;
        line-height:22px; /*FIX ADDED*/
    }
    #calender button {
        position: absolute;
        bottom: -2px; /*FIX ADDED*/
    }
    #calender button:first-child {
        left: 0;
    }
    #calender button:last-child {
        right: 0;
    }
    #calender table {
        background: #fff;
        border-collapse: collapse;
        color: #222;
        font-family:'Lucida Sans', Verdana, Arial, sans-serif;
        font-size: 13px;
        width: 100%;
    }
    #calender td {
        border: 1px solid #ccc;
        color: #444;
        line-height: 22px;
        text-align: center;
    }
    #calender tr:first-child td {
        color: #222;
        font-weight: 700;
    }
    #calender .selected {
        background: #f0951d;
        border: 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
    }

/*FIX ADDED - Added style for "Meeting Details box" */

    #meetingDetails {
        background-color: #ccc;
        width:500px;
        margin:0 auto; /*NEW FIX FOR CENTER BOX*/
    }

新更新:

将两个框都放在屏幕的中央 在“margin:0 auto;”和“#calender”中添加“#meetingDetails”属性

代码如下:

#calender {
    background: rgba(0, 0, 0, .1);
    border-radius: 5px;
    box-sizing: border-box;
    padding: 0px;
    width: 220px;
    text-align:center;
    margin:0 auto; /*NEW FIX FOR CENTER BOX*/
}

#meetingDetails {
    background-color: #ccc;
    width:500px;
    margin:0 auto; /*NEW FIX FOR CENTER BOX*/
}

注意:根据新要求更新了 fiddle !

关于html - 在格式化时遇到一些麻烦，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25674203/

25 4 0
文章推荐： linux - 在 linux 上测量峰值 nvidia GPU 内存使用
文章推荐： c++ - 从两个 lambda 函数返回 lambda 时出现链接器错误
文章推荐： c++ - 是否有 g++ 或 clang++ 调试选项来指导可变参数模板
文章推荐： java - 在 java 中填充值后，Excel 下载无法正常工作
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com