2012-07-19 69 views
0

你好我使用我的編輯器有問題。我正在使用Dreamweaver CS6,並希望使用字段集。特定的編輯器設置爲CSS?

與問題是,我試圖從這裏實現我的原始代碼:

original code

,我以爲它曾經是我的編輯一樣的風格。但它與示例中的不一樣。因此,我會得到這樣的:

cs6 problem

,你可以在左側看到它似乎是,裏面還有自動添加標籤,使得輸入域不與黑幀刷新。

如果有人能告訴我如何解決這個問題,我真的很感激。非常感謝。

UPDATE:

上面的圖片就是我將在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> 

我會得到的結果:

enter image description here

,並進入上的jsfiddle相同的代碼將導致:

this

+1

你是否真的將該代碼複製到你的編輯器? DW有時在他們所見即所得的瀏覽器中顯示錯誤,但在實際發佈時正確播放。 – 2012-07-19 09:07:11

+0

我將整個代碼插入正文中。創建了一個新的樣式表並將其發佈到我的網絡服務器上。對此很好奇,它也會顯示不正確。 – bonny 2012-07-19 09:09:41

+0

如果您想要這種佈局,並且爲了避免發生這種情況的風險,爲什麼不把這些字段放在表格中? – 2012-07-19 09:16:47

回答

1

它會可能是一個自動填充/保證金問題,嘗試所有的值作爲你做的第一件事,然後你可以設置你想要的值

* { 
    margin:0; 
    padding:0; 
} 
+0

非常感謝。而已。 – bonny 2012-07-19 09:39:50