Question

私はここにJSのドロップダウン/選択リストを実装しようとしていますが、私が書いたものであるドロップダウンリストが良く見えるように：

//some js code 

#startJobDialog (A dialog box in JS) 

// js code 


var markUp = "<ul id='topMenu' class='ui-menu ui-widget ui-widget-content' role='menu' tabindex='0' style='display: table; width: 220px; margin: 0 auto;'>\r\n"; 
    markUp += "\t<li data-menu='job' class='ui-menu-item' id='ui-id-2' tabindex='2' role'=menuitem' style='display: inline-block; width: 220px; vertical-align: top; horizontal-align: center'><span class='ui-icon ui-icon-triangle-1-s'></span>\r\n"; 
    markUp += "<ul class='subMenu ui-menu ui-widget ui-widget-content' id='jobMenu' role='menu' tabindex='-1' style='display: block; padding-left: 40px;'><li class='ui-menu-item' id='ui-id-5' tabindex='0' role='menuitem'><br></br>-->Tier1 VAE<br></br></li > <li class='ui-menu-item' id='ui-id-6' tabindex='1' role='menuitem'>-->Tier1 Non-VAE<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='2' role='menuitem'>-->Tier2<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='3' role='menuitem'>-->Tier1 Smart Conversion<br></br></li></ul></li>\r\n"; 

    $("#startJobDialog").html(markUp); 

... 

としてコードの上あたりに、私は#startJobDialogにHTML markupを設定していますし、それは私に次のように出力できます：あなたが見ることができるように

を、私はメニューリスト内の項目を選択するたびに、selection checkmarkは共同です選択した項目の下に表示されますが、実際には選択した項目の横に表示されます。幅が正しいように見え、それを調整しようとしました。 JSのエキスパートではなく、私は最初の演習に入っています。<ul>, <li>などの異なるクラス、スタイル、およびその他のパラメータについての洞察は助けになります。そして、私はこのドロップダウンを今よりももっと良くしたいと思っています。

JS内の右/自分の希望する位置にチェックマークを設定して選択リストを見栄え良くするにはどうすればよいですか？

Answer 1

私の提案は、あなたのマークアップからCSSを削除し、CSSファイルに入れることです。

そこから要素を絶対的に配置してみてください。

私はあなたのコードのスニペットをこの記事で提供しました。 <br>の束が、デフォルトの選択された項目であると私が想定しているものに追加されているのを見ることができます。チェックマークがどこに追加されているのか分かりません。

スニペットを入力すると、さらにお手伝いできます。しかし、フローティング、または絶対配置はオプションになる可能性があります。または、:: beforeまたは:: after擬似セレクタを使用することもできます。

私がより具体的になるためには、生成される正確なマークアップが必要です。

var markUp = "<ul id='topMenu' class='ui-menu ui-widget ui-widget-content' role='menu' tabindex='0' style='display: table; width: 220px; margin: 0 auto;'>\r\n"; 
 
    markUp += "\t<li data-menu='job' class='ui-menu-item' id='ui-id-2' tabindex='2' role'=menuitem' style='display: inline-block; width: 220px; vertical-align: top; horizontal-align: center'><span class='ui-icon ui-icon-triangle-1-s'></span>\r\n"; 
 
    markUp += "<ul class='subMenu ui-menu ui-widget ui-widget-content' id='jobMenu' role='menu' tabindex='-1' style='display: block; padding-left: 40px;'><li class='ui-menu-item' id='ui-id-5' tabindex='0' role='menuitem'><br></br>-->Tier1 VAE<br></br></li > <li class='ui-menu-item' id='ui-id-6' tabindex='1' role='menuitem'>-->Tier1 Non-VAE<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='2' role='menuitem'>-->Tier2<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='3' role='menuitem'>-->Tier1 Smart Conversion<br></br></li></ul></li>\r\n"; 
 

 
    $("#startJobDialog").html(markUp);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="startJobDialog"></div>