2

フィールドセットを使用して要素の下にラベルを表示しようとしています。ハンドルバー テンプレート内でこれを行っています。画像とその名前、および画像の下の表示名をループします。私はそれをすることができません。助けてください.Belowは私が表示する必要がある方法です

IMG1                     IMG2

image1 name             image2 name



<fieldset style="text-align: center;border:1px solid #CCC;display:inline;padding- top:0.25em;vertical-align:middle;">
   <legend class="devHealth"> Temperature</legend>{{#tempdevicesHealth}}
   <img style="width:50px;height:50px;margin: 0 30px;" src="{{DeviceImg}}"      alt="{{Hovertxt}}" title="{{Hovertxt}}"/>
  <br/>
   <label style="font-weight: bold">{{DeviceTitle}}</label>{{/tempdevicesHealth}}</fieldset>
4

1 に答える 1

3

テーブルに画像と画像のタイトルを設定します: jsfiddle.net/XP5ZV

必要に応じて css を変更し、さらに画像を追加する場合は、テーブルにもう 1 列追加します。

HTML

<fieldset style="">
<legend class="devHealth">Temperature</legend>
    <table>
        <tr>
            <td>
                <img style="" src="http://lorempixel.com/50/50" alt="{{Hovertxt}}" 
                    title="{Hovertxt}"/>
            </td>
            <td>
                <img style="" src="http://lorempixel.com/50/50" alt="{{Hovertxt}}" 
                    title="{Hovertxt}"/>
            </td>
        </tr>
        <tr>               
           <td>
                <label style="">{{Title}}</label>
            </td>
            <td>
                <label style="">{{Title}}</label>
            </td>
        </tr>  
    </table>
</fieldset>

CSS

.fieldset{
    border:1px solid #CCC;
    display:inline;
    padding-top:0.25em;
    vertical-align:middle;
    text-align: center;
}

.label{
    position:absolute;
    display: inline;
    left: auto;
    margin-left: 50px;
    font-weight: bold;
    text-align: center;
}
.img{
    width:50px;
    height:50px;
    margin-left:30px;
    margin-right:30px;    
}

fieldset table tr td label {
    font-weight: bold;
    text-align: center;
}
于 2013-09-14T07:11:09.997 に答える