工作JSFiddle與相關的Divs（並排顯示），但在開發中的ASP：面板不對齊

Question

我有一個working demo在jsfiddle的2個相關的div你點擊左邊div上的listitem，這更改右側div上的listitems。

當我試圖把它放在一個asp的，我不能得到這個工作在我的ASP應用程序：面板：

它表現出非常糟糕：

然後我更新了JSFiddle到包括asp:panel ，但現在情況更糟。

請問我該如何在asp：panel中使用HTML，以便它能像第一個jsfiddle鏈接一樣正確呈現。

Answer 1

有相當多的變化，我會建議做：

• asp:panel不是一個標準的HTML元素，它將在HTML呈現爲div所以在撥弄它應該是一個div
• li需要包含在ul
• 內聯樣式有效但不是最優，最好將樣式移動到樣式表中
• borderTopColor:yellow;是不是有效的CSS屬性，這應該是border-top-color: yellow;
• div:not(.container)是一個很寬泛的規則，這似乎可以用來定位.sort-me所以最好的辦法是這樣

設置它的主要問題似乎與div:not(.container)規則一樣，它被設置爲針對任何div而沒有類container，所以它也將樣式應用於導致不希望的佈局的面板。

$(function() { 
 
    // $('.sort-me').sortable({connectWith: '.sort-me, #also-sort-me'}); 
 
}); 
 

 
$(".x").click(function() { 
 
    $('li').removeClass('selectedItem'); 
 
    $(this).addClass('selectedItem'); 
 
    var x = $(this); 
 
    //alert($(this).attr("data-value")); 
 
    $("li").not(".x").each(function() { 
 
     $(this).find('input').val(x.attr("data-value")); 
 
    }); 
 
}); 
 

 
$("#pnl1").dialog({ 
 
    modal: true, 
 
    zIndex: 9000, 
 
    beforeClose: function() { 
 
    } 
 
}); 
 

 
$("#pnl1").show();

#pnl1 { 
 
    display: none; 
 
} 
 
.sort-me { 
 
    background-color: #00274c; 
 
    list-style-position: inside; 
 
    margin: 10px; 
 
    min-height: 30px; 
 
    padding: 10px; 
 
    vertical-align: top; 
 
    width: 390px; 
 
} 
 
li { 
 
    background-color: #ffcb05; 
 
    cursor: move; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
.sort-me-input { 
 
    float: right; 
 
} 
 
.selectedItem { 
 
    background-color: yellow; 
 
    color: black; 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 
<form id="form1"> 
 
    <div id="pnl1"> 
 
     <div class='container'> 
 
      <ul class='sort-me'> 
 
       <li class="x" data-value="1">First</li> 
 
       <li class="x" data-value="2">Second</li> 
 
       <li class="x" data-value="3">Third</li> 
 
      </ul> 
 
      <ul class='sort-me'> 
 
       <li>Lorem 
 
        <input class="sort-me-input" /> 
 
       </li> 
 
       <li>ipsum 
 
        <input class="sort-me-input" /> 
 
       </li> 
 
       <li>dolor 
 
        <input class="sort-me-input" /> 
 
       </li> 
 
       <li>dolor 
 
        <input class="sort-me-input" /> 
 
       </li> 
 
       <li>dolor 
 
        <input class="sort-me-input" /> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</form>

JS小提琴：http://jsfiddle.net/evrqeu7d/1/