[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 47
  • Last Modified:

Putting small gap between elements in this <ul><li>

Hello;

Please see this link below and its codes,i need that put 1px gap between the list items./thanks

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
0
MOSTAGHASSI
Asked:
MOSTAGHASSI
  • 4
  • 3
1 Solution
 
xtermieCommented:
You need a Ul LI block in the style section, with padding set to what you want, something like this added to your code
ul li {
  display: inline-block;
  border: 1px solid red;
  color: grey;
  text-align: center;
  width: 10rem;
  height: 8rem;
  margin: 0;
  padding: 0;
  position:relative;
}
0
 
Dave BaldwinFixer of ProblemsCommented:
Your comment / question doesn't make any sense.  You need to show us your code and tell us what you need.
0
 
xtermieCommented:
or something like this will look closer to what you want
ul li {
  display: inline-block;
  border: 0px solid black;
  color: white;
  text-align: center;
  width: 10rem;
  height: 3rem;
  margin: 0;
  padding: 1;
  position:relative;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
MOSTAGHASSIAuthor Commented:
@xtermie,have you test your codes in that panel?It doesn't work.
0
 
xtermieCommented:
yes I have tried it, just placed it above </style>
If the example produces more or less space than what you want you can tweak the numbers
see my example

Unless I did not understand what you actually needed; please explain furhter
UL-LI-example.png
0
 
MOSTAGHASSIAuthor Commented:
Thanks,yes but just 1px gap as a vertical line(white) between each item.
0
 
MOSTAGHASSIAuthor Commented:
Hi Dave,please visit the link ,there are codes in that link,i need 1px gap as a vertical line(white) between each item in that example in the link.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu
0
 
xtermieCommented:
Try this
ul li {
   display: inline-block;
   border: 1px solid white;
   color: white;
   text-align: center;
   margin: 0;
   padding: 1;
   position:relative;
 }
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now