我有一个div元素，它有ul和li元素。 li元素在悬停时打开，但它向右扩展页面宽度，从而导致页面滚动。我希望它根据li元素的内容来居中。以下是参考代码
<div id="user-menu">
<nav id="signin" class="dropdown">
<ul>
<li>
<a href="#">
<img src="~/img/blue-cart.gif" alt="View Cart" /><span id="uname"> View Cart (0) </span><img src="~/img/down-arrow.gif" alt="Sign In">
</a>
<ul style="width: auto;">
<li style="float: right;">
@{
int totalAmount = 0;
if (Session["Cart"] != null)
{
var cart = (List<ShoppingProduct>)Session["Cart"];
if (cart.Count == 0)
{
<span>Cart is empty!</span>
}
else
{
<table border="1" style="text-align: center;">
<thead>
Cart Items
</thead>
<tr>
<td>Name</td>
<td>quantity</td>
<td>Unit Price</td>
<td>Total Price</td>
<td>Action</td>
</tr>
@foreach (var c in cart)
{
<tr>
<td>@c.productName</td>
<td>@c.quantity</td>
<td>@c.price</td>
<td>@c.totalPrice</td>
@{
totalAmount += c.totalPrice;
}
<td>
<a href="~/deleteFromCart.cshtml/?id=@c.id">remove from cart</a>
</td>
<td>@c</td>
</tr>
}
<tr>
<td>Total Amount is @totalAmount</td>
</tr>
</table>
}
}
else
{
<a href="~/login.cshtml" style="padding-left:2px;">Cart is empty!</a>
}
}
</li>
</ul>
</li>
</ul>
</nav>
</div>
