Question

我为我的网页制作了一个小的CSS图像滑块，但我的图像有一些问题（滑块中的图像）。屏幕上的图像位置不同（尽管我确保图像在上传前尺寸相同）。

滑块的第一张图像太高（因为标题和图像之间没有间隙）。第二个图像工作正常，第三个图像低于第二个和第一个图像？我的网页可以在codepen.io（http://codepen.io/aaron_1986/pen/dGdqvx）

上看到

[
    [
        'name'      =>  'legal_issue',
        'question'  =>  'Description of your current legal issue:',
        'label'     =>  'Please provide as much detail as possible',
        'type'      =>  'text',
    ], [
        'name'      =>  'green_card',
        'question'  =>  'Do you have a Green Card?',
        'label'     =>  'Green Card',
        'type'      =>  'radio',
        'option'    =>  [
                            'Yes', 'No'
                        ]
    ], [
        'name'      =>  'visa_type',
        'question'  =>  'Which type of VISA do you currently have?',
        'label'     =>  'Visa type',
        'type'      =>  'select',
        'option'    =>  [
                            'A-1/A-2','A-1/A-2','A-3 Visa','A-3 Visa','B-1 Visa','B-1 Visa','B-2 Visa','B-2 Visa','C-1 Visa','C-1 Visa','C-1/D Visa','C-1/D Visa','E-1/E-2 Visa','E-1/E-2 Visa','F-1/M-1 Visa','F-1/M-1 Visa','G-1/G-4 Visa','G-1/G-4 Visa','G-5 Visa','G-5 Visa','H-1/H-3 Visa','H-1/H-3 Visa','H-2A','H-2A','I Visa','I Visa','J-1 Visa','J-1 Visa','L-1 Visa','L-1 Visa','O-1/2 or P-1/3 Visa','O-1/2 or P-1/3 Visa','Q-1 Visa','Q-1 Visa','R-1 Visa','R-1 Visa','T Visa','T Visa','U Visa','U Visa'
                        ]
    ], ...
];

Answer 1

我的猜测是<li>元素仍然有list-style。它仍然不完美，但我将list-style: none添加到您持有图像的<li>元素（我还调整了图像宽度）并保持对齐：codepen.io/anon/pen/gPejEJ

#slider figure li {
 list-style: none;
}
#slider figure img {
 width: 33.33%;
 float: left;
}

CSS图像滑块（图像不能保持在同一位置）？

1 个答案: