内联图像列表未与文本对齐，中断结构

Question

So I signed up here because I have something that drives me crazy. I am sure the answer is pretty straight and simple, but I just can see it...

I want to make a small gallery for an article, showing screenshots from different video games. The problem: The list wont align correctly with the text within the content div . No matter what I do. text-align: left just gets it to exactly this position, center and right work. It is like it is aligning on the edge of a div , but there is none. Putting it within the needed <p> tags destroys the text like seen in the picture. Keeping it out of the <p> tags keeps the text like it should be, but the list is exactly at the same place. I tried inline-block , inline , position: absolute etc, but nothing seems to work. I already tried searching the other div s for problems, but I just can't find anything. Here is a picture .

This is the css:

.gallerie {
    text-align: left;
    width: 100%;
}

.gallerie ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

.gallerie li {
    display: inline;
    margin: 0px;
    padding: 0px;
}

Can't somehow show the HTML part here, but it's just a simple ul li list with images. The whole thing is simple, but something just doesn't.

Thanks in advance!

Edit:

So as I can't get the thing with the code right, here is the direct linkt to the page with that problem: Link to the Problem

I hope this is allowed here. Thank you to the admin for editing, I am new here, and really not used to it. Thank you very much.

So guys, in short:

wanted to add the pictures here, can't post more than two links

Edit: Funny thing, it works when I put the ul li outside of the article tag. So I would have a workaround.

Edit: The problem seems to be within the article tag. I have both, right and left margin in there. But when I make it to margin 0px, the whole text moves left (thats why I have a margin of 20px there). I guess the problem will be a second unneeded margin.

Edit: I fixed this by taking away the margin-left: 20px; out of the article tag, and added the value to the p tag for that class instead. Works. I don't really know what the error was, but it seems fine now. Thank you all for your help.

Last Edit: You can see the working example when you refresh the link to the site. Thanks for your help.

Answer 1

Your problem is css padding

<ul> tags have default padding. If you set padding: 0; then the spacing should disappear.

I would say set text-align: center; and padding: 0; for the .gallerie class

Is this what you want?

Corresponding css for .gallerie

Padding Example:

 .padded { padding: 10px; background: red; } p { background: yellow; } 

 <div class="padded"> <p>This is some text</p> </div> 

Answer 2

Looking at the link to the page where the issue lies. Just give the .gallerie class padding:0; and a margin-left:15px; (to achieve uniform indentation).

It appears from the page that you may be attempting to wrap the <ul> in a <p> , which is not valid HTML.

Answer 3

尝试将padding-left: 20px添加到<ul>并将文本包装在<p>