こんにちは、エディタの使用に問題があります。私は Dreamweaver cs6 を使用しており、フィールドセットを使用したいと考えています。
それに関する問題は、ここから元のコードを実装しようとしたことです:
以前はエディターで同じスタイルだったと思っていました。しかし、それは例と同じではありません。結果として、私はこれを得るでしょう:
左側にあるように、入力フィールドがダーク フレームとフラッシュしないように、そこにタブが自動的に追加されているようです。
これを解決する方法を教えてくれる人がいれば、本当に感謝しています。どうもありがとう。
アップデート：
上の画像は、dreamweaver で表示されるものです。
そのコードを使用してWebサーバーに公開すると:
<!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 に同じコードを入力すると、次のようになります。