Is there a way for me to place my list item onto the following available line?

Here's the code I'm working with:

.bottombarelementL {
  display: inline-block;
  margin-right: 10px;
  transition-property: all;
  transition-duration: 1s;
  float: left;
  margin-left: 20%;
}

.bottombarelementL:hover {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
}

.bottombarelementR {
  display: inline-block;
  margin-right: 10px;
  transition-property: all;
  transition-duration: 1s;
  float: right;
  margin-right: 20%;
}

.bottombarelementR:hover {
  display: inline-block;
  margin-right: 10px;
  font-size: 20px;
}
<div class="bottomnavleft">
  <ul class="bottomleft">
    <li class="bottombarelementL">About Us</li>
    <li class="bottombarelementL">Affiliates</li>
  </ul>
</div>
<div class="bottomnavright">
  <ul class="bottomright">
    <li class="bottombarelementR">TOS</li>
  </ul>
</div>

I'm trying to achieve a two-row bottom navbar. Any tips or guidance would be greatly appreciated as I am new to HTML and CSS, only 13 years old, and eager to learn and improve! I'd like the bottom text to be displayed in two columns

htmlcssforms

Answer №1

To create a flexible layout, you should utilize the flex view property.

In order to implement this, ensure that you include display: flex in the parent element's styling. Additionally, assign the appropriate flex ratio to each of its children elements.

For instance:

.nav {
  display: flex;
  flex-direction: row;
}

.left, .right {
  flex: 1;
}
<div class='nav'>
  <div class='left'>
    <ul>
      <li>About Us</li>
      <li>Affiliates</li>
    </ul>
  </div>
  <div class='right'>
    <ul>
      <li>TOS</li>
    </ul>
  </div>
</div>

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

Building a form within an Angular Material table component

I am currently facing an issue where I need to embed a form within a mat-table that is contained inside a stepper which is housed within a mat-dialog. Currently, I have set up a table with mat-form-field and mat-input inside the td tags, but my input appea ...

htmlcssangulartypescriptangular-material

Tips for modifying HTML template code within a Typescript document using Atom

There appears to be a current trend in Angular development where the template code is embedded within the Angular component, usually found in a Typescript or Javascript file. However, when attempting this approach, I noticed that I am missing html syntax ...

htmlangularjstypescriptatom-editor

Displaying numerous Google charts within a Bootstrap carousel

A bootstrap carousel has been implemented to showcase our company's data. The carousel includes a bootstrap table, images, and two Google charts: a pie chart and a stacked bar chart. The issue arises when the active class is not maintained for the Go ...

javascripthtmlbootstrap-4google-visualizationbootstrap-carousel

Which specific HTML element triggers the initiation of ajax in Jquery?

I have a situation where various HTML elements trigger ajax requests when clicked. My goal is to determine which specific element was clicked inside the ajaxComplete event. Although I attempted to use event.target, it only returns the entire document inst ...

javascriptjqueryhtmlajax

Navigating in Django: Redirection based on initial form selection

I am working on a simple app where I want to implement a workflow as follows: 1) User answers form "A" 2) Based on the answer to question A.a, they are redirected to form "B" or form "C" 3) Save the entire instance All three forms will utilize the same mo ...

djangoformshttp-redirect

Is there a way to remove a checkbox node that has already been generated?

I've been working on creating a to-do list, and I've run into an issue with deleting the checkbox once the task is complete. I attempted to create a function within the main function containing an if/else statement, but it didn't seem to wo ...

javascripthtmldom

store the id of each li element dynamically into an array

In my code, a list is generated dynamically and each list item has a special id. I am trying to store each li "id" in one array. This is JavaScript code: var i = 0; $("ul#portfolio li").each(function(eval) { var idd = new Array(); idd[i] = $(this ...

javascriptjqueryhtml

Utilizing personalized markers to encapsulate correct HTML elements

Recently, I came across a discussion on the implications of using custom tags in HTML. After reading about it, I have decided to avoid using custom tags in order to adhere to standards and ensure that search engine bots can properly read my code. However, ...

htmltags

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...

javascriptphpjqueryhtml

Alter the navigation background when moving between sections on a one-page website

I need to ensure that the background of the navigation remains transparent on the "home" section. However, when switching to other sections, the background color of the navigation becomes permanently black. <header class="clearfix"> <nav> ...

javascriptjquerycsshtml

Ensure that the HTML link is valid and authenticated using SESSIONS

When creating a website, one of the initial tasks I like to tackle is adding links at the bottom of the page for checking valid HTML and CSS: HTML5  •   CSS <div> <a href="http://validator.w3.org/check?uri=referer" ...

javascripthtmlajaxvalidation

Employing IF conditions within a form to refine options

I am looking to streamline the options in my form based on the car and transmission selected. I have set up the form, but I am struggling with the JavaScript code. I need help figuring out how to only display certain color options when Car 1 is chosen alon ...

javascripthtmlcssif-statement

When the horizontal scroll is turned off, it also disables the functionality of my mobile-friendly

I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...

javascripthtmlcssreactjstailwind-css

Retrieve information from a variety of selected checkboxes

Is there a way to retrieve the values of check boxes that are generated dynamically? @ $db = mysql_connect("abc", "abc", ""); mysql_select_db("abc"); $strSQL = "SELECT * FROM student"; ...

phpjavascripthtmlajaxforms

Tips for customizing the mx-fluity navbar code to create multi-tiered dropdown menus

I have limited experience in web design and struggle with understanding CSS code. Can anyone provide guidance on how to create a (multi-level) menu in the popular mx-fluity blogger template that will display consistently on both PC and mobile browsers? T ...

htmlcssblogger

Customize the appearance of an ASP link button within a navigation menu

Just getting started with ASP.net and CSS, I want to customize my link button using CSS similar to other <a href> buttons, but I seem to be running into some issues. This is the code for my menu: <div id="templatemo_menu"> <ul ...

htmlasp.netcss

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

javascriptjqueryhtmlcssmobile

Adjusting position in relation to the cursor's movements

I have searched extensively for similar questions but have been unable to resolve my issue. Here, I am sharing just a single list item from my code. The task at hand is to create a span element on the mousemove event over the list item, and dynamically set ...

javascripthtmljquerycsscursor-position

What is the best way to make the button cover the entire width?

I have a Vuetify card with a layout where I am rendering some dynamic Vuetify components inside the card based on checkbox selection. These components can be a divider, a spacer, toolbar, or a button. However, I'm struggling to make the buttons span t ...

javascriptcssvue.jsvuetify.js

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

I am facing an issue with my HTML form where it is loaded correctly into the DOM through a jQuery ajax call. The problem arises when I submit the form data to a PHP module using another jQuery ajax call. Even though the network traffic shows that the form ...

javascriptphpjqueryhtmlajax