Issues arise with CSS border and margin styling

Hello everyone, I am new to CSS and trying to figure out how to add some space between the boxes in my list when resizing the page. Can anyone help me with this? Thanks!

nav{
  border: solid;
    border-color: black;
}
ul li
{
    margin-bottom: 11px;
    display: inline;
    font-weight: 900;
    border: solid;
    border-color: black;
    
}
nav ul li{
    color: black;
    text-decoration: none;
    padding: auto;
    padding-right: 80px;
    padding-left: 80px;
}
<nav>
    <ul>
        <li>List</li>
        <li>Contact Us</li>
        <li>Shopping Cart</li>
        <li>Login</li>
    </ul>
</nav>
htmlcss

Answer №1

nav{
  border: solid;
    border-color: black;
}
ul li
{
    margin-bottom: 11px;
    display: inline;
    font-weight: 900;
    border: solid;
    border-color: black;
    display:inline-block;
}
nav ul li{
    color: black;
    text-decoration: none;
    padding: auto;
    padding-right: 80px;
    padding-left: 80px;
}
<nav>
    <ul>
        <li>List</li>
        <li>Contact Us</li>
        <li>Shopping Cart</li>
        <li>Login</li>
    </ul>
</nav>

simply include display:block in the li element style

Answer №2

Give this a shot.

nav{
  border: solid;
    border-color: black;
}
ul li
{
    margin-bottom: 11px;
    display: inline;
    font-weight: 900;
    border: solid;
    border-color: black;
    padding:5px 5px;
    margin-right:5px;
 
}
ul{
  margin: 0 auto;
  display:table;
  padding:15px;
}
<nav>
    <ul>
        <li>List</li>
        <li>Contact Us</li>
        <li>Shopping Cart</li>
        <li>Login</li>
    </ul>
</nav>

Answer №3

To maintain your inline elements, you have the option of using the line-height property to generate spacing between the rows. In such cases, the margin-bottom rule is not necessary.

nav {
  border: solid;
  border-color: black;
}
ul li {
  display: inline;
  font-weight: 900;
  border: solid;
  border-color: black;
  line-height: 20pt;
}
nav ul li {
  color: black;
  text-decoration: none;
  padding: auto;
  padding-right: 80px;
  padding-left: 80px;
}
<nav>
  <ul>
    <li>List</li>
    <li>Contact Us</li>
    <li>Shopping Cart</li>
    <li>Login</li>
  </ul>
</nav>

If not, simply assign display: inline-block; to your list elements for them to function like inline elements, enabling block properties to be applied as needed.

nav {
  border: solid;
  border-color: black;
}
ul li {
  margin-bottom: 4px;
  display: inline-block;
  font-weight: 900;
  border: solid;
  border-color: black;
}
nav ul li {
  color: black;
  text-decoration: none;
  padding: auto;
  padding-right: 80px;
  padding-left: 80px;
}
<nav>
  <ul>
    <li>List</li>
    <li>Contact Us</li>
    <li>Shopping Cart</li>
    <li>Login</li>
  </ul>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looping through a jQuery script to add a class if a certain condition is met in another class

$(document).ready(function() { if ($("#grid .media-box").hasClass("brand1")) { $("#grid .media-box-content").addClass("brand01") }; } }); and in body looping div grid <div id="grid"> <?php foreach($data as $items) { ?> <div cl ...

javascriptphpjqueryhtmlcss

Guide to removing text color from a background with css or javascript

Is there a way to achieve the effect shown in this image on my HTML page: http://prntscr.com/b912c0? I've attempted using mix-blending modes, but haven't been successful in recreating the desired result. Any tips or tricks for accomplishing this ...

jqueryhtmlcss

problems with an extra administrator account access

Is it possible to have a single login form that can cater to both users and admins? I currently have a user login system in place but would like to add an admin login as well. How can I implement this without creating separate logins? if(isset($_POST[&ap ...

phphtml

When the footer div is viewed on a mobile device, the Social Media Icons will stack vertically along with additional text

Seeking help with a bootstrap website issue here. When I switch to mobile view, the images in my footer are stacking vertically outside of the div. The code and an example image are provided below. <!DOCTYPE html> <html> <head> ...

htmlcssbootstrap-4

Looking to showcase XML data from a post request in a visually appealing HTML format?

Currently, I am in the process of executing a function that retrieves an XML document from another website. After successfully displaying the returned XML within #document using console.log, I encounter an issue when trying to parse the XML and add it onto ...

htmljqueryajaxxmlpost

retrieve the php variable value and display it in an input field using javascript

I am looking to combine the variable $variable with the input value using JavaScript $variable= file_get_contents('./env.txt'); <select id="customer_id" name="customer_id" w300 required pj-chosen" data-msg-required=&q ...

javascriptphphtml

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...

html

"SASS: Troubleshooting the Issue with nth-child Selector Not Functioning Proper

I am currently attempting to apply specific styles to all items in a list except for the first child. While I believe I have correctly set up the SASS, the style is not being applied as expected. HTML <div class="list"> <div *ngFor="let item o ...

cssangularsass

Embed an event into an HTML div that is not editable

How can I bind the paste event on a div to grab an image from the clipboard and assign it to an Angular scope variable? This solution works in Chrome, but not in IE 11 without adding the contenteditable=true attribute. However, using content editable break ...

javascriptjqueryhtmlangularjs

What about an external ui-grid-menu-button option for customizing the

Looking for a solution to separate the ui-grid-menu-button from the top right of the table and position it elsewhere? Check out this Stack Overflow question from a year ago which unfortunately remains unanswered: External ui-grid-menu-button Struggling t ...

javascriptcssangularjsangular-ui-grid

"Ensuring a fixed table header (thead) with Bootstrap styling in AngularJS: A step-by-step guide

I'm struggling to make the header of my AngularJS webpage sticky using Bootstrap Styling. Despite trying multiple solutions, none seem to work correctly. Does anyone have a simple approach to fix this issue? Additionally, when I attempt to make the he ...

htmlcssangularjsbootstrap-4

Update the icon within the expandable display

Is there a way to change the plus sign to a minus sign in an expandable table view on click? (changing fa fa-plus to fa fa-minus) The goal is to have the plus sign displayed when the view is compressed and the minus sign displayed when it is expanded. If ...

javascriptjquerycss

Sas: The outcome matches the viewer results exactly

I am reaching out because I am experiencing an issue with my results viewer in Sas 9.4. When the results load, they appear similar to the output format. Instead of displaying a table with cells, it appears as a table drawn with -+|. The layout options do ...

htmlsastabulate

The target="_blank" attribute does not seem to function properly within an iframe

I've been tackling the WordPress media library tab recently. Within this iframe, I included a link with target="_blank". My expectation was for this link to open in a new browser tab or window, but instead, it opens within the iframe tab. Here's ...

htmliframe

Floating text around an image inside a div with floated IE7

Struggling with positioning text around an image in IE7, it's not floating correctly as expected. The text appears below the image instead of beside it. After researching, I discovered that the issue might be related to placing both the image and tex ...

csscss-floatinternet-explorer-7

Is it possible to modify @page directive(CSS) values from the code-behind(C#) or JavaScript?

Using the @page directive, you can define the printer margins for a page separately from regular CSS margins: <style type="text/css" media="print"> @page { size: auto; /* auto is the current printer page size */ margin ...

javascriptc#jqueryhtmlcss

Website image container for optimal responsiveness

I recently started using Bootstrap 5 to build a new website and I encountered an issue with the layout of my feature and mission sections. I wanted the images to move above the text when the viewport is scaled down to mobile or tablet size, but I wasn&apos ...

htmlcssresponsive-designfrontendbootstrap-5

Submitting form by clicking a link on the page

To submit a POST request with "amount=1" without displaying it in the URL, I need the site to send this request when any link on the site is clicked. This JavaScript code achieves that with a GET request: window.onload = function () { document.body.oncli ...

javascripthtmlpostget

Transmitting the contents of $body in Mysql as table information, not as

Looking for a way to send MySQL database data via email using PHP Mailer. I have managed to send it as an attachment, but struggling to send it as a formatted body. When I try to use file_get_contents on 'displaywebpage.php', it only reads the HT ...

phphtmlphpmailer

Utilizing Bootstrap 4: Opting for <select> over tabs (<li>)

Is there a way to customize the appearance of Bootstrap tabs by replacing them with a dropdown select menu instead of the standard tab layout created with <ul> and <li> elements? I am working with a relatively small area (such as col-3) where ...

javascripthtmljquerycssbootstrap-4