CSS的特定编辑器设置？答案

【问题标题】：specific editor settings for css?CSS的特定编辑器设置？
【发布时间】：2012-07-19 09:02:14
【问题描述】：

您好，我在使用编辑器时遇到问题。我正在使用 dreamweaver cs6，并希望使用字段集。

问题在于我试图从这里实现我的原始代码：

original code

我认为在我的编辑器中它曾经是相同的风格。但它与示例中的不同。结果我会得到这个：

正如您在左侧看到的那样，其中似乎有自动添加的选项卡，因此输入字段不会与暗框齐平。

如果有人能告诉我如何解决这个问题，我将不胜感激。非常感谢。

更新：

上图是我在dreamweaver中看到的。

当我使用该代码在我的网络服务器上发布它时：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#left {
    height: 400px;
    width: 500px;
    float: left;
    border: solid 2px #f23;
}
#left #frame {
    background-color:#444444;
    height: 337px;
    width: 440px;
    margin-top: 36px;
}
#left #frame form fieldset {
    height: 337px;
    width: 440px;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    border: none;
}
#left #frame form fieldset h1 {
    margin-top: 15px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}
#left #frame form fieldset h2 {
    font-size: 13px;
    font-weight:lighter;
    margin-left: 10px;
    margin-top: 3px;
}
#left #frame form fieldset ul {
    list-style-type: none;
    margin-top: 30px;
}
#left #frame form fieldset ul .fl label {
    font-size: 12px;
    color: #ECECEC;
    font-weight: bolder;
    width: 80px;
    margin-bottom: 2px;
}
#left #frame form fieldset ul .fr label {
    font-size: 12px;
    color: #ECECEC;
    font-weight: bolder;
    width: 80px;
    margin-bottom: 2px;
}
#left #frame form fieldset ul input {
    color: #444444;
    font-size: 10px;
    width: 180px;
    height: 18px;
    padding-left: 5px;
    outline:none;
}
#left #frame form fieldset ul .fl {
    width: 180px;
    float: left;
    margin-bottom: 15px;
    background-color: #f23;
    margin-left: 0px;

}
 #left #frame form fieldset ul .fr {
    width: 180px;
    float: right;
    margin-bottom: 15px;
    background-color: #0F6;
    margin-right: 0px;
}
</style>
</head>

<body>

<div id="left">
                    <div id="frame">
                            <form action="" method="post">
                            <fieldset>
                                <h1>Text 1</h1>
                                <h2>text 2</h2>
                                <ul>
                                    <li class="fl">
                                    <label for="label1">Label 1</label>
                                    <input type="text" id="label1" name="label1" tabindex="10" autocomplete="off">
                                    </li>

                                    <li class="fr">
                                    <label for="label2">Label 2</label>
                                    <input type="text" id="label2" name="label2" tabindex="20" autocomplete="off">
                                    </li>

                                    <li class="fl">
                                    <label for="label3">Label 3</label>
                                    <input type="text" id="label3" name="label3" tabindex="30" autocomplete="off">
                                    </li>

                                    <li class="fr">
                                    <label for="label4">Label 4</label>
                                    <input type="text" id="label4" name="label4" tabindex="40" autocomplete="off">
                                    </li>

                                    <li class="fl">
                                    <label for="label5">Label 5</label>
                                    <input type="text" id="label5" name="label5" tabindex="50" autocomplete="off">
                                    </li>

                                    <li class="fr">
                                    <label for="label6">Label 6</label>
                                    <input type="text" id="label6" name="label6" tabindex="60" autocomplete="off">
                                    </li>
                                </ul>
                            </fieldset>
                            </form>
                    </div>
</div>
</body>
</html>

我会得到结果：

在 jsfiddle 上输入相同的代码会得到：

this

【问题讨论】：

您是否已将该代码逐字复制到您的编辑器中？ DW 有时在 WYSIWYG 查看器中显示不正确，但在实际发布时正确播放
我将整个代码插入正文中。创建了一个新样式表并将其发布在我的网络服务器上。对此感到好奇的是，它也会显示不正确。
如果您希望它采用这种布局，并且为了避免发生这种情况的风险，为什么不将字段放在表格中？
我更喜欢字段集。在我看来，它更容易处理。我更新了我的问题。

标签： html css editor styles dreamweaver

【解决方案1】：

这可能是一个自动填充/边距问题，尝试将所有值作为您做的第一件事，然后您可以根据需要设置值

* {
    margin:0;
    padding:0;
}

【讨论】：