0

構造に含まれるフォームフィールドのリストがありulますli。マークアップを簡略化して、自分が抱えている問題に焦点を合わせました。

マークアップは次のとおりです。

<ul>
<li class="multiplechoice">
   <fieldset>
     <legend>my label</legend>
     <div class="description">My description</div>

          <ul>        
            <li>
              <button value="asdf" readonly="readonly"></button>
              <label>test12</label>
             </li>
             <li>
               <button value="0" readonly="readonly"></button>
               <label for="test23">test23</label> </li>
           </ul>

    </fieldset>
</li>
</ul>

そして私がこれまでに持っているCSS：

legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    clear: both;
    float: left;
    width: 80px;
    margin-right: 20px;
}

ul{
    float: left;
}

注：divwithクラスdescriptionは、存在しないか、内部にテキストが含まれていないか、テキストが含まれている可能性があります。

私がやりたいのは、凡例と説明の両方を左に浮かせることです。説明は凡例の下にある必要があります。含まれているボタンはul、それらのフロートされたアイテムからマージンで分離され、最初のフロートの上部に配置され、垂直に配置される必要があります。

これが物事の現在の状態を示す写真です： ここに画像の説明を入力してください

私はあらゆる種類のフロートとポジショニングを試してきましたが、そこに到達できないようです。望ましい結果をどのように達成できるかについて誰かがアドバイスできますか？

私はCSSのみの解決策を探しています、できればjavascriptはありません:)

フィドル： http： //jsfiddle.net/eHEcJ/

4

3 に答える 3

0

に移動するdescriptionと、から属性labelを削除できます。説明は左側のフローティングラベルの一部になっているため、機能するはずです。を作るclear:bothfloat:leftDescription display:block

<style>
.myLabel{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    width: 80px;
    margin-right: 20px;
    display:block;
}

ul{
    float: left;
}

</style>
<fieldset>
  <ul>
    <li class="multiplechoice">
          <label class="myLabel">my label
            <span class="description">some description</span>
          </label>
          <ul>
            <li>
              <button value="asdf" readonly="readonly"></button>
              <label>test12</label>
             </li>
             <li>
               <button value="0" readonly="readonly"></button>
               <label for="test23">test23</label> </li>
           </ul>
     </li>
</ul></fieldset>

最終タグがレンダリングされないという問題がありました。

于 2012-05-20T09:09:23.620 に答える
0

私はちょうど上のフロートを取り除き、ulそれを作ることになりましたinline-block：

legend{
    float: left;
    width: 80px;
    margin-right: 20px;
}

.description{
    clear: both;
    float: left;
    width: 80px;
    margin-right: 20px;
}

ul{
    display: inline-block;
}

そしてフィドル： http： //jsfiddle.net/BU57V/

于 2012-05-20T09:53:25.417 に答える
0

上記のように、フィールドを整列するために常にテーブルが必要なわけではないので、これが役立つものです。レポートのヘッダーを作成しようとしているときに試行錯誤で見つけました。私はHTMLの初心者なので、これは最も洗練されたソリューションではないかもしれません。

ここに画像の説明を入力してください

于 2013-12-19T19:19:28.377 に答える