Question

我有一个简单的HTML表格，其中包含2个列，其中包含“姓名”，“评论”和“电子邮件”的文本字段和标题。

我正在寻找最佳策略来设计这个HTML片段，如果它出现在多个页面上 - 每页需要不同的尺寸。我最近一直在阅读很多关于CSS的内容，但是没有发现足够的信息，这让我很自然地知道设计这样的.css的最佳方式。

例如，我可能会在“评论”页面上以50％的宽度显示评论表单，但在网站的某些其他位置的边栏中仅显示20％。

我主要关注的是盒子宽度的样式 - 当然，同样的方法适用于文本。例如，名称字段不应该与电子邮件字段一样宽。我认为固定宽度优于百分比。

显然有很多方法可以设计它。假设我已经有1个主css文件。

1）将百分比宽度放在input标签上，然后外部div对于它所包含的任何面板都是100％宽度。这不需要特定于页面的css，但我不喜欢百分比的想法在td标记内，加上我无法轻易更改textarea的高度。

2）在每个页面中为＃Name，＃Comments和#Email创建样式作为<head><style> *

中的其他样式

3）基于页面特定css文件中的＃Name，＃COMMments和#Email的样式。页面特定文件是好还是坏？我甚至不确定我喜欢基于这里的ID的样式，因为它们是动态生成的，如果由于某种原因需要更改，我必须在任何地方更新css。

4）基于＃Name，＃Comments和#Email的样式，但使用特定于每个页面的后代选择器限定它们。所以我在FAQ页面上显示时会.faqPage #Name。显然这些都在我的主css文件中。

5）为'emailField , nameField and commentsField`创建类名[为此选项重复选项2,3,4]

6）为'shortField , fullWidthField and textInputField`创建类名[为此选项重复选项2,3,4]

7）你明白了这一点：）

8）别的东西

我对所有选项都有点不知所措。我如何决定哪种方式最好？一个特定的目标是能够在多个页面上设置相同的HTML样式（显然这就是css的全部内容 - 但它确实影响了我可以使用的选项）。

<div id="pnlSubmitComments">
<table class="fieldTable"> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Name:</label> 
    </td> 
    <td> 
        <input id="Name" name="Name" type="text" value="" /> 
    </td> 
    </tr> 
    <tr> 
    <td align="right"> 
        <label for="Comments">Email:</label> 
    </td> 
    <td> 
        <input id="Email" name="Email" type="text" value="" /> 
    </td> 
    </tr> 
     <tr> 
    <td align="right" valign="top"> 
        <label for="Comments">Questions:</label> 
    </td> 
    <td> 
        <textarea id="Comments" name="Comments"> 
</textarea> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    </td> 
    <td> 
        <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" /> 
    </td> 
    </tr> 
</table> 
</div>

PS。实际的字段名称更具体，例如CommentsName - 为了便于阅读，更容易将Name放在此处。

Answer 1

旁注：也许你不应该使用表来布局这个表格而是使用字段集，它会给你更多的灵活性。例如，如果您决定将标签和输入字段放在一个更窄的列中......

没有表格的示例（看起来也更漂亮）：

<style type="text/css">
<!--

form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
    font: 100% verdana, arial, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 500px;
    max-width: 600px;
    width: 560px;
}

form fieldset {
    /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
    border-color: #000;
    border-width: 1px;
    border-style: solid;
    padding: 10px; /* padding in fieldset support spotty in IE */
    margin: 0;
}

form fieldset legend {
    font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
    /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label {
    display: block; /* block float the labels to left column, set a width */
    float: left;
    width: 150px;
    padding: 0;
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;
}

form input, form textarea {
    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
     label aligns textarea better in IE */
}

textarea {
    overflow: auto;
}

 /* uses class instead of div, more efficient */
form br {
    clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
-->
</style>
<div id="pnlSubmitComments">
    <form>
        <fieldset>
            <label for="Comments">
                Name:
            </label>
            <input id="Name" name="Name" type="text" value="" /><br />
            <label for="Comments">
                Email:
            </label>
            <input id="Email" name="Email" type="text" value="" /><br />
            <label for="Comments">
                Questions:
            </label>
            <textarea id="Comments" name="Comments">
            </textarea><br />
            <label for="spacing"></label>
            <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" />
        </fieldset>
    </form>
</div>

现在回答你的主要问题。我会这样做：

我会使用我想要使用表单的不同布局列的id。所以如果我在我的主列（）中使用它，我会相应地编写CSS：

#main .pnlSubmitComments form fieldset {
    /*your CSS*/ 
}

分别为

和侧栏

#side .pnlSubmitComments form fieldset {
    /*your CSS*/
}

您可以通过分配类来控制每个元素：

<input type="text" class="email" name="email" id="email" />

然后你完全如上所述：

#main .email {
   /*your css for the .email textbox/*
}

Answer 2

如果可以在容器元素上添加样式类，则可以使用一个css文件轻松完成。

例如，第1页将包含以下html：

<body class="page1">
  <!-- repeated html here -->
  <input />
</body>

在第2页上你会有：

<body class="page2">
  <!-- repeated html here -->
  <input />
</body>

在单个css文件中，您可以根据body元素的类来定位输入标记：

body.page1 input { width: 25%; }
body.page2 input { width: 50%; }

因此，保持html相同，只需更改容器元素的类（或id），并使用它来编写不同的css规则。

更新：重新阅读您的列表后，我会在列表中看到这或多或少是4号。我认为如果您可以使用它，这是一个不错的选择。我还使用它来定位不同的浏览器，方法是在body标签上添加一个指示浏览器的类。

Answer 3

1）使用常见的css并设置一些值，例如后面的代码中的宽度。

2）根据不同需求创建多个css文件，并使用后面的代码将正确的css链接到页面。

Answer 4

抱歉这么久才给你回复！

带有 grid-template-areas 的 CSS-GRID 是实现此目的的绝佳方式！

您可以命名区域，然后使用响应式媒体查询切换 css 并更改布局，而无需重新排列 HTML。

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

在多个页面上显示相同HTML时设置样式的最佳策略

4 个答案: