html - 无法对齐 div(仅内部图像)和 div(文本)

Question

我想要的是我的照片与我的技能列表对齐，左侧是技能，右侧是图片。

所以我所做的是，将列表和图片放在单独的“div”中。使用了“显示:内联 block ；” CSS 中的属性。

注意，两个 div 都有“width: 50%;”

    .divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
    }

    #imag {
        width: 100%;
        height: auto;
    }

    <div id="top" class="divIN">
        <div class="both">
            <h1>Present Skills</h1>
            <ul>
                <li>C/C++</li>
                <li>Python</li>
                <li>HTML(CSS, Bootstrap)</li>
                <li>Java(Not Right Away!)</li>
            </ul>
        </div>
        <div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
        </div>
    </div>

Answer 1

当您使用 display:inline-block 时，元素之间总是有一个小空间。基本上它是浏览器添加的字符之间的空格。如果必须使用内联 block ，您可以在 stackoverflow 中找到许多技巧来避免这种情况，例如在第二个 div 中添加一个小边距，使用 font-size:0;甚至是在 html 中的 div 标记上添加返回的 hack，如下例所示。

简单的方法应该是使用float而不是inline-block

.divIN {    margin: 25px 0px 25px 0px;}

    .both { 
        width: 50%;
        display: inline-block;
    }

    #imag {
        width: 100%;
        height: auto;
    }

<div id="top" class="divIN">
        <div class="both">
            <h1>Present Skills</h1>
            <ul>
                <li>C/C++</li>
                <li>Python</li>
                <li>HTML(CSS, Bootstrap)</li>
                <li>Java(Not Right Away!)</li>
            </ul>
        </div
        ><div class="both"><img src="https://drive.google.com/uc?id=0B9tI4qB-P3oAZjJ6dWZ5VHpPRkU" alt="Image not displayed" id="imag">
        </div>
    </div>

How to remove the space between inline-block elements?