Question

我正在尝试使链接A，B进入左侧元素（绿色框），而链接C，D进入右侧元素（黄色框），并用容器包装。如图所示，我也设法使用CSS position: absolute; right: 0;将Link C，D放置在右侧但是当我对链接A，B使用position: absolute; left: 0;时，此链接未在左侧对齐上元素

Picture

这是我的代码：

<head>    
        <style>
          
            .container {
                width: 1000px;
                border: 3px solid black;
                margin: auto;
                padding: 16px;
                
            }
    
            .left, .right { width: 400px; }
    
    
            .left {
                background-color: #197b30;
                float: left;   
                color: white;
                font-style: italic;
                text-align: left;
                position: relative;
                 
                                                       
            }
    
            .left span {
                font-weight: bold;
                font-size: large;
                font-style: normal;
                text-decoration-line: underline;
                   
            }
    
            .left ul {
                color: rgb(243, 9, 126); 
                list-style-type: disc;
                position: absolute;
                left: 0;
                
            }
    
            .left a { color: #ff0000}
    
            .right a { color: #ff0000}
    
    
            .right {
                background-color: #fff200;
                float: right;  
                color: black;
                font-style: italic;
                text-align: right;
                position: relative;
                                                 
                 
            }
    
            .right span {
                font-weight: bold;
                font-size: large;
                font-style: normal;
                text-decoration-line: underline;
                
            }
    
            .right ul {             
                color: rgb(243, 9, 126); 
                list-style-type: disc;
                position: absolute;
                right: 0;
                                  
            }      
       
            .clear {
                clear: both;
            }
                  
            
        </style>
    </head>
    <body>  
            <div class="container">
                <div class="left">
                    <p><span>This is a left paragraph</span</p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel, aperiam odit 
                    nostrum, 
                    reprehenderit temporibus reiciendis aliquam maxime sunt qui quos eligendi sequi unde, 
                    quas molestiae explicabo quod harum veniam alias.</p>
                    
                    <p><span>This is a left link</span></p>
                    <ul>
                        <li><a href="#">Left Link A</a></li>
                        <li><a href="#">Left Link B</a></li>
                    </ul>
                    
                </div>
                 
                <div class="right">
                    <p><span>This is a right paragraph</span></p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi incidunt 
                       necessitatibus adipisci eum harum, culpa, amet voluptate cumque molestias quos 
                       earum 
                       asperiores hic debitis iure iste porro? Fugit, itaque quo.</p>
                    
                    <p><span>This is a right link</span></p>
                    <ul>
                    <li><a href="#">Right Link C</a></li>
                    <li><a href="#">Right Link D</a></li>
                    </ul>
                     
                </div>
                <div class="clear"></div>
                          
           </div>

Answer 1

使用ul元素时，每个li元素的左侧都有一个默认填充。

尝试一下：

.left ul {
  color: rgb(243, 9, 126); 
  list-style-type: disc;
  position: absolute;
  left: 0;

  padding: 0;    /* Add this */       
}

这将删除填充并按照您的期望放置导航。

使用CSS绝对位置放置元素

1 个答案: