Question

我试图为网站做一个页脚即时通讯。我希望在右边有像Impressum这样的东西，在左边有一些社交媒体的小图片。我让它在右侧工作，但我不知道为什么图像不在右侧。我已经谷歌搜索了，但他们说的东西对我没用。

<ul>
    <li><a>Irgendwas</a>
    </li>
    <li><a>Impressum</a>
    </li>
    <li><a><address>Erstellt von</address></a>
    </li>
</ul>
<ul id="socialmediaicons">
    <li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
    </li>
    <li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
    </li>
</ul>

我的建议是将它们放在页脚之外，但我需要将它们放在那里。

Answer 1

浮动时必须按相反顺序放置元素＆＃34;右边＆＃34;事情：

demo

<ul id="socialmediaicons">
    <li><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
    </li>
    <li><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
    </li>
</ul>
<ul>
    <li><a>Irgendwas</a>
    </li>
    <li><a>Impressum</a>
    </li>
    <li><a><address>Erstellt von</address></a>
    </li>
</ul>

Answer 2

如果您想要首先提到的左侧图片，请在社交媒体图标的列表项中添加一个类，并为其指定display: inline-block，以满足您的需要。如果你想要他们在右边，他们就在那里。

   
.leftFoot {
  display: inline-block;
  }

<footer id="footer-wrapper">
    <ul>
        <li><a>Irgendwas</a>
        </li>
        <li><a>Impressum</a>
        </li>
        <li><a><address>Erstellt von</address></a>
        </li>
    </ul>
    <ul id="socialmediaicons">
        <li class="leftFoot"><a><img src="bilder/icons/facebook.svg" width="30" height="30"></img></a>
        </li>
        <li class="leftFoot"><a><img src="bilder/icons/google+-with-circle.svg" width="30" height="30"></img></a>
        </li>
    </ul>
</footer>

浮动表左右相同的容器

2 个答案: