调整列表尺寸并移动时margin-left失效问题求助

核心问题分析 #

1. 自定义标签的默认行为问题：你使用的<list>不是HTML标准元素，浏览器会将其默认为inline显示模式。而inline元素无法设置width，且margin-left的表现会受行内布局限制，导致你设置的样式完全不符合预期。
2. 列表结构语法错误：<ul>是无序列表的容器，内部必须嵌套<li>元素承载内容，直接在<ul>里写文本不符合HTML规范，可能引发额外的布局异常。

修正步骤 #

1. 修正HTML结构 #

用标准块级元素<div>替换自定义的<list>，同时修正<ul>的内部结构：

<div id="main-list">
    <ul>
        <li>obsah0</li>
    </ul>
    <ul>
        <li>obsah1</li>
    </ul>
    <ul>
        <li>obsah2</li>
    </ul>
    <ul>
        <li>obsah3</li>
    </ul>
    <ul>
        <li>obsah4</li>
    </ul>
    <ul>
        <li>obsah5</li>
    </ul>
</div>

2. 保留原有CSS（无需修改） #

你的CSS样式本身没有问题，替换标签后，display: flex会将<div>转为弹性容器，width: 80vw和margin-left: 200px都会正常生效：

#main-list {
    width: 80vw;
    margin-left: 200px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    border-bottom-style: solid;
    border-width: 5px;
    border-color: darkblue;
}

额外说明 #

如果一定要使用自定义标签<list>，可以在CSS中先强制指定其显示模式，避免默认行为干扰：

list {
    display: block; /* 先转为块级元素，再应用flex样式 */
}

但更推荐使用HTML标准标签，避免浏览器兼容性问题。

内容的提问来源于stack exchange，提问作者Jarin