插入的Html/css样式不正确

Question

我已经到处搜索，但似乎无法解决我的问题。不知怎么的，我忘了这个问题的解决方法。我是Muse的新手，但对html和css非常熟悉。我在文本编辑器中制作了这个联系表单，它在DW和jsfiddle中工作完美。当我把它插入Muse时，它就把它压碎了。我尝试过外部样式表，内部与对象插入，内联与对象插入。都给了我相同的结果(下图)。有人甚至建议在assets文件夹里放一个外部样式表，我照做了，甚至尝试了css文件夹和normal文件夹，都没有成功。

这是可能的修复或缪斯不允许这种类型的事情?

提前感谢所有有帮助的回复。均湿

代码如下:

   
label {
    float: left;
    width: 6em;
    text-align: right;
    margin-right: 10px;
}
.submit {
    margin-left: 6em;
}
fieldset {
    width: 500px;
    background-color: #FFDE00;
    border: none;
}
p {
    font-family: arial;
}
   

<fieldset>
<form action="mailto:[e-mail]"
      method="post" enctype="text/plain">
    <!-----Form heading----->    
<p> Tell us who you are </p>    
    
    <!-----Inout customer details----->
<p>
    <label class="username" for="first Name">
        First Name: </label>
    <input type="text" name="firstname" id="first Name"
        size="35" maxlength="40" /> </p>    
    
<p>
    <label class="username" for="Email">
        Email: </label>
    <input type="text" name="email" id="Email"
        size="35" maxlength="40" /> </p>  
    
    <!-----Dropdown make----->    
<p> Please select your make: </p>
<p>
    <select name="make">
        <option value="3M">3M</option>
        <option value="3M">Acer</option>
        <option value="3M">Ask</option>
        <option value="3M">BenQ</option>
        <option value="3M">Epson</option>
        <option value="3M">Hitachi</option>
        <option value="3M">InFocus</option>
        <option value="3M">LG</option>
        <option value="3M">Mitsubishi</option>
        <option value="3M">NEC</option>
        <option value="3M">Optoma</option>
        <option value="3M">Panasonic</option>
        <option value="3M">Philips</option>
        <option value="3M">Samsung</option>
        <option value="3M">Sanyo</option>
        <option value="3M">Sharp</option>
        <option value="3M">Sony</option>
        <option value="3M">Toshiba</option>
        <option value="3M">Viewsonic</option>
        <option value="3M">Vivitek</option>
        <option value="3M">Other</option>
    </select> </p>   
    <!-----Submit picture of sticker----->
<p> Use the Choose File button to submit a picture of your model           sticker if unsure what number to use: </p>  
<p>
    <input type="file" size="30" /> </p>    
    
    <!-----Text Area----->
<p> For any other comments or if you selected Other please             specify here: </p> 
<p> 
    <textarea name="comments" rows="5" cols="40">
Enter more comments here...
    </textarea> </p>  
    
    <!-----Submit & Reset buttons----->
<p class="submit"> 
    <input type="submit" value="Submit" />
    <input type="reset" value="Clear the form" /> </p>    
    
</form>
</fieldset>    

这是开始和结束的结果:

不好

Answer 1

您可能会发现DW使用了许多浏览器初始CSS样式，而Muse可能会重置所有内容。所以你必须从头开始，比如边框、边距、填充等。

例如，每个段落元素都需要应用一些margin-bottom。这将立即使它看起来更像第一个示例。

   
label {
    float: left;
    width: 6em;
    text-align: right;
    margin-right: 10px;
}
.submit {
    margin-left: 6em;
}
fieldset {
    width: 500px;
    background-color: #FFDE00;
    border: none;
}
p {
    font-family: arial;
    margin-bottom:1em;
}
   

<fieldset>
<form action="mailto:[e-mail]"
      method="post" enctype="text/plain">
    <!-----Form heading----->    
<p> Tell us who you are </p>    
    
    <!-----Inout customer details----->
<p>
    <label class="username" for="first Name">
        First Name: </label>
    <input type="text" name="firstname" id="first Name"
        size="35" maxlength="40" /> </p>    
    
<p>
    <label class="username" for="Email">
        Email: </label>
    <input type="text" name="email" id="Email"
        size="35" maxlength="40" /> </p>  
    
    <!-----Dropdown make----->    
<p> Please select your make: </p>
<p>
    <select name="make">
        <option value="3M">3M</option>
        <option value="3M">Acer</option>
        <option value="3M">Ask</option>
        <option value="3M">BenQ</option>
        <option value="3M">Epson</option>
        <option value="3M">Hitachi</option>
        <option value="3M">InFocus</option>
        <option value="3M">LG</option>
        <option value="3M">Mitsubishi</option>
        <option value="3M">NEC</option>
        <option value="3M">Optoma</option>
        <option value="3M">Panasonic</option>
        <option value="3M">Philips</option>
        <option value="3M">Samsung</option>
        <option value="3M">Sanyo</option>
        <option value="3M">Sharp</option>
        <option value="3M">Sony</option>
        <option value="3M">Toshiba</option>
        <option value="3M">Viewsonic</option>
        <option value="3M">Vivitek</option>
        <option value="3M">Other</option>
    </select> </p>   
    <!-----Submit picture of sticker----->
<p> Use the Choose File button to submit a picture of your model           sticker if unsure what number to use: </p>  
<p>
    <input type="file" size="30" /> </p>    
    
    <!-----Text Area----->
<p> For any other comments or if you selected Other please             specify here: </p> 
<p> 
    <textarea name="comments" rows="5" cols="40">
Enter more comments here...
    </textarea> </p>  
    
    <!-----Submit & Reset buttons----->
<p class="submit"> 
    <input type="submit" value="Submit" />
    <input type="reset" value="Clear the form" /> </p>    
    
</form>
</fieldset>