列表项周围的边框，包括列表样式类型

Question

当我将鼠标悬停在列表项上时，我希望整个区域都有一个边框，包括list-style-type：square;目前我的边框只能包含列表项中的文字......

感谢您的帮助。

Answer 1

使用list-style-position

将项目符号放入列表项目中

ul li{
    padding-left:3px;
    list-style-position:inside;
    border:1px solid transparent;
}
ul li:hover{
    border-color:#F00;
}

JSFiddle

Answer 2

li:hover { border: 2px solid blue; 
           list-style-type: square;
           list-style-position: inside; }

Answer 3

li:hover{
    border:1px solid grey;
    list-style-position:inside;
}

<强> FIDDLE

Updated Fiddle...

Answer 4

带有列表样式类型的边框

ul li{list-style-position:inside;border:2px solid red;} 

没有列表样式类型的边框

ul li{list-style-position:outside;border:2px solid red;}