左侧留白部分怎么弄掉，还有文字前的点怎么一起囊括到颜色里



html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            #box{
                width: 300px;
                height: 350px;
                border:solid;
            }
            #libox{
                background-color: beige;
                margin-left: -20px;
                margin-top: 10px;
                height: 30px;
            }
        style>
    head>
    <body>
        <ul id="box">
            <div id="libox"><li><a href=" ">东方新闻li>div>
            <li id="libox"><a href="#">媒体广角li>
            <li id="libox"><a href="#">东方视点li>
            <li id="libox"><a href="#">学子风采li>
            <li id="libox"><a href="#">高校经纬li>
            <li id="libox"><a href="#">新闻排行li>
        ul>
    body>
html>

img


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box{
                width: 300px;
                height: 350px;
                border:solid;
                margin: auto;
            }
            #libox{
                background-color: beige;
                /* margin-left: -20px; */
                margin-top: 10px;
                height: 30px;
            }
            li{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul id="box">
            <div id="libox"><li><a href=" ">东方新闻</li></div>
            <li id="libox"><a href="#">媒体广角</li>
            <li id="libox"><a href="#">东方视点</li>
            <li id="libox"><a href="#">学子风采</li>
            <li id="libox"><a href="#">高校经纬</li>
            <li id="libox"><a href="#">新闻排行</li>
        </ul>
    </body>
</html>

ul设置padding: 0,margin: 0把浏览器默认样式重置掉

#box{ paddng:0}

圆点无法 包含到 颜色里 。只能自己实现了 。可以把 ul的 list:none; 也就是给 #box加