1

オプションが選択されたときに選択の横に画像を表示しようとしています。残念ながら、画像が追加されると、テーブル全体が揺れます。パディングと高さと幅を変更しようとしましたが、基本的に暗闇の中で刺しています。誰かが私を助けてくれれば幸いです。フィドルは次のとおりです。

http://jsfiddle.net/vwWb9/7/

これがコードです。すべてを 1 つのファイルにまとめたので、簡単にコピーして TE に貼り付けて確認できます。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">


    @CHARSET "ISO-8859-1";

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
    {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

body {
    line-height: 1
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
    {
    display: block
}

nav ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent
}

ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none
}

mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold
}

del {
    text-decoration: line-through
}

abbr[title],dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table { /*  border-collapse:collapse;*/
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,select {
    vertical-align: middle
}

/**********CUSTOMISED***********/  
body {
    font-size: 62.5%;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 0.8em;
}

h6 {
    font-size: 0.7em
}
/**********END CUSTOMISED***********/
#app_cont {
    border: 1px solid grey;
    height: auto;
    width: 500px;
    margin: 200px auto 200px auto;
    background: #efefef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-family: Arial;
    font-size: 1.6em;
    padding: 10px
}

#ab_cont {
    float: left;
    height: auto;
    width: 100%;
    margin: 10px 0 0px 0;
}

#btn_cont {
    border: 1px solid grey;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #dcdcdc;
    clear: both;
    padding: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app_btns {
    margin: 0px 0px 0px 0px;
    min-width: 90px;
    text-align: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ababab;
    padding: 9px 18px;
    text-decoration: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #ededed),
        color-stop(100%, #dfdfdf) );
    background: -moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%);
    background: -ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    filter: progid :                                                        
                                          DXImageTransform.Microsoft.gradient
        ( 







                                                   startColorstr = 


                                                     '#ededed', endColorstr = 




                                        '#dfdfdf' );
    background-color: #ededed;
    color: #777777;
    display: inline-block;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app_btns:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #dfdfdf),
        color-stop(100%, #ededed) );
    background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
    background: -ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    filter: progid :                                                        
                                          DXImageTransform.Microsoft.gradient
        ( 







                                                   startColorstr = 


                                                     '#dfdfdf', endColorstr = 




                                        '#ededed' );
    background-color: #dfdfdf;
    cursor: pointer;
}

.app_btns:active {
    position: relative;
    top: 1px;
}

.disabled {
    margin: 0;
    min-width: 90px;
    text-align: center;
    font-size: 16px;
    font-family: Arial;
    font-weight: normal;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid grey;
    padding: 9px 18px;
    text-decoration: none;
    background: rgb(156, 156, 156);
    color: #efefef !important;
    display: inline-block;
    text-decoration: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.disabled:hover {
    cursor: default;
}

#opts_tbl {
    margin-bottom: 5px;
    table-layout: fixed;
    width:500px;

}

#opts_tbl td {


    padding: 15px 0px 15px 0px;

    overflow: hidden;
}

.opt_slcts {
    width: 165px;
    padding: 4px 3px 4px 0px;
    text-indent: 1px;
    line-height: 23px;

}

.val_ers {

    font-size: 0.8em;
    color: #1133aa;
}

.val_img {
    float:left;
    height: 24px;
    width: 24px;
    padding: 0px 0px 0px 15px;
}



    </style>
</head>
<body>
    <div id="app_cont">
<div id="opts_pnl">

                <table id="opts_tbl">
                    <tr>
                        <td>
                            <label for="num_slct" class="opt_labels">Options 1:</label>
                        </td>
                        <td>
                            <select name="num_slct" id="num_slct" class="opt_slcts">
                                <option value="-"   >-</option>
                                <option value="5"   >5</option>
                                <option value="10"  >10</option>
                                <option value="15"  >15</option>
                                <option value="20"  >20</option>
                                <option value="25"  >25</option>
    <!--                        <option value="3"   >3</option>                             -->
                            </select> 
                        </td>
                        <td id="num_slct_er" class="val_ers">Please make a selection.</td>
                    </tr>
                    <tr>
                        <td id="tl_c">
                            <label for="top_slct" class="opt_labels">Options 2:</label>
                        </td>
                        <td id="tr_c">
                            <select name="top_slct" id="top_slct" class="opt_slcts">
                                <option value="-"       id="opt-1"                      >-</option>
                                <option value="rnd_sel" id="opt-2"                      >Option</option>
                                <option value="blank"   id="blank" disabled="disabled"  ></option>
                                <optgroup label="Misc.">
                                    <option value="cmn_mis"     id="opt-3">Option</option>
                                    <option value="ib4e"        id="opt-1">Option</option>
                                    <option value="fin_e"       id="opt-1">Option</option>
                                    <option value="dbl_cons"    id="opt-1">Option</option>
                                    <option value="slt_lts"     id="opt-6">Option</option>  
                                    <option value="plrs"        id="opt-1">Option</option>
                                    <option value="blank"       id="blank" disabled="disabled"></option>
                                </optgroup>

                            </select> 
                        </td>
                        <td id="top_slct_er" class="val_ers">Please make a selection.</td>
                    </tr>
                    <tr>
                        <td id="bl_c">
                            <label for="diff_slct"  class="opt_labels">Options 3:</label>
                        </td>
                        <td id="br_c">
                            <select name="diff_slct" id="diff_slct" class="opt_slcts">
                                <option value="-" id="item-1">-</option>
                                <option value="1" id="item-2">Option</option>
                                <option value="2" id="item-3">Option</option>
                                <option value="3" id="item-4">Option</option>
                            </select> 
                        </td>
                        <td id="diff_slct_er" class="val_ers">Please make a selection.</td>
                    </tr>
                </table>

                <div id="btn_cont" unselectable="on">
                        <a href="#" id="strt_btn" class="disabled"  unselectable="on">Start</a>
                        <a href="#" id="help_btn" class="app_btns hlp_btns"  unselectable="on">Help</a>     
                </div>

        </div><!--#opts_pnl-->
    </div><!--#app_cont -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script type="text/javascript">

$('.opt_slcts').on('change', function(){

        var errors = 0;

        $('.opt_slcts').each(function(){

            var id = this.id + "_er",
                tick = "<img src='images/tick.png' alt='tick' class='val_img'>";

            if($(this).val() == "-"){

                errors++;

                $('#' + id).empty();
                $('#' + id).append('Please make a selection.');

            } else {

                $('#' + id).empty();
                $('#' + id).append(tick);
            }

        });

        if(errors > 0){

            $('#strt_btn').attr('class', 'disabled');

        } else {

            $('#strt_btn').attr('class', 'app_btns');

        }

    });
    </script>
</body>
</html>
4

3 に答える 3

0

展開は、display: table-cell; の自然な動作です。高さ/幅のプロパティは無視されます。

line-height: 24pxに追加してみると、画像と同じ高さで始まりますtd。td

于 2013-03-30T23:55:29.230 に答える
0

次のような回答が表示されます。

.val_ers {
  vertical-align: middle;
}

しかし、別の画像で別の TD 要素を作成するとどうなるでしょうか?

私は使用することをお勧めします：

#opts_tbl td {   
    vertical-align:middle;
    padding: 15px 0px 15px 0px; 
    overflow: hidden;
}
于 2013-03-31T00:09:23.093 に答える