CODEWITHSUNDEEP
csshtml
user1586761
user1586761

Reputation:

Space between links in a div element

I am new to using div tags, and I have been pulling my hair out trying to figure this problem out. I have searched for hours, and I can't seem to find a good solution that works.

I am currently making a horizontal menu in one div element. I cannot use multiple div elements nested in one because that will cause the elements to wrap when I resize the browser. I cannot use float:left because that will also cause the elements to wrap when I resize the browser.

I have tested the above and multiple other snippets of code, but I cannot remove the space between links in the menu. Here is my code.

<div style=" display:inline-block; width:100%; padding: 0.1em 0.6em; border-collapse:collapse; max-height:100px; margin-top:-1px; margin-left:30%; overflow-y:hidden;">

<img src="logo.png" />
<img src="cornerthing4.png" /><a href="index.php"><img src="homebtn.png"></a><a href="index.php"><img src="faqbtn.png"></a><img src="cornerthing3.png">



</div>

I am using the style tag because I am trying to design the page right now, I will be moving the css code over to a css file when I am finished.

When the <a href> tag is removed, the images are side by side where I want them to be. As soon as I put that tag on they gain a 20 pixel space in between.

Any insight as to why this occurs and how to correct it would be great.

EDIT: the code works in jfiddle, however, it does not work on my website. Here is a link to the site: http://matxor.net/header.php

Upvotes: 0

Views: 9794

Answers (3)

Charlie
Charlie

Reputation: 11777

I am currently making a horizontal menu in one div element. I cannot use multiple div elements nested in one because that will cause the elements to wrap when I resize the browser. I cannot use float:left because that will also cause the elements to wrap when I resize the browser.

Sure you can!

http://jsfiddle.net/charlescarver/fY48A/

In this example, the elements won't wrap on themselves and the container div is still 100% of the width.

Upvotes: 1

Ryan
Ryan

Reputation: 5682

Take the margin-left:30px rule off <a> tags and it will look how you want it.

Upvotes: 2

Ivy
Ivy

Reputation: 887

Your a style has a margin. This margin is not present in the markup you pasted here. Is that what you're trying to get rid of?

a:link {
  margin-left: 30px;
  color: #0A58A5;
  text-decoration: none;
  font-weight: bold;
}

Upvotes: 4

Related Questions