When creating a list of 5 items with HTML using the li tag, each item has data formatted as a:b.
<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
The desired display format is to have a aligned to the left and b to the right:
|a b|
How can this be achieved using CSS?
Flexbox is the way to go for that.
ul {
width: 80%;
border: 1px solid grey;
margin: 1em auto;
padding: 0;
}
.subtitle {
display: flex;
justify-content: space-between;
}
span {
background: #c0ffee;
}<ul>
<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
</ul>Alternatively, you could use floats
ul {
width: 80%;
border: 1px solid grey;
margin: 1em auto;
padding: 0;
}
.subtitle {
overflow: hidden;
text-align: center;
}
span {
background: #c0ffee;
}
.subtitle span:first-child {
float: left;
}
.subtitle span:last-child {
float: right;
}<ul>
<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
</ul>If those options don't quite suit your needs, you can consider using CSS Tables
ul {
width: 80%;
border: 1px solid grey;
margin: 1em auto;
padding: 0;
}
.subtitle {
display: table;
table-layout: fixed;
width: 100%;
text-align: center;
}
span {
background: #c0ffee;
display: table-cell;
}
.subtitle span:first-child {
text-align: left;
}
.subtitle span:last-child {
text-align: right;
}<ul>
<li class="subtitle"> <span>a </span>: <span>b</span>
</li>
<li class="subtitle"> <span>c </span>: <span>d</span>
</li>
</ul>Keep in mind that CSS Tables may not provide the exact layout you're looking for.
Check out the demo here
ul {
width: 100px;
}
li {
list-style: none;
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li class="subtitle"> <span class="left">|a </span>: <span class="right">b|</span></li>
<li class="subtitle"> <span class="left">|c </span>: <span class="right">d|</span></li>
</ul>
</body>
</html>Implementing float property on span elements.
ul{
list-style-type:none;
border:1px solid #000;
padding:0px;
}
li span:nth-child(1){
float:left;
}
li span:nth-child(2){
float:right;
}<ul>
<li class="subtitle"> <span>a </span>: <span>b</span></li>
<li class="subtitle"> <span>c </span>: <span>d</span></li>
</ul>Looking to style an anchor element that contains other HTML elements. Here is the basic code structure: HTML: <div class="container" id="sub-menu"> <div class="row" data-bind="foreach: subMenu"> ...
I've been attempting to modify the color of the placeholder in an inputbase. I came across several methods online and tried implementing them, but none have been successful. Below are the codes I have tried. <InputBase id="input-id&quo ...
Hey there, I have a link that looks like this: I also have similar links and I'm looking to extract the ID from each one. The challenge is that the characters surrounding the ID vary for each link, so simply cutting out characters from the left and r ...
In my React project, I am working on focusing on an input element when specific buttons or elements are clicked. It is important for me to be able to switch focus multiple times after rendering. For instance, if a name button is clicked, the input box for ...
<table> <tr> <td>></td> </tr> <tr> <td>&GT</td> </tr> </table> In the code snippet above, I have table cells containing HTML entities. A re ...
I am looking to create a set of divs that are centered on the page and adjust in size according to the length of the username. .Container1 { display: table; width: 100%; padding:0; margin:0; -webkit-box-sizing: border-box; -moz-box-sizing: bor ...
Attempting to replicate the design of a website by starting with the navigation bar. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https: ...
Today, I delved into using Material UI for my React project. My goal is to create a registration form similar to this one. Essentially, I want 5 input text fields without any borders and with a simple background color effect when active. However, I'm ...
I'm attempting to align elements to the right within a container and hide any overflowed elements while still allowing them to be accessed via a scrollbar. However, I've noticed that the scrollbar disappears when using justify-content: flex-end. ...
I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...
Is it possible to adjust the size of a radio button using CSS? ...
Is there a way to modify the CSS of a child vuetify component? .filterOPV > div > div { min-height: 30px !important; } .filterOPV > div > div > div { background: #f5f5f5 !important; } <v-flex md2 class="filterOPV&quo ...
I am faced with a dilemma regarding my navbar design. Here is an image of my current navbar layout: I am attempting to align the components within the navbar to resemble the following design: Here is the HTML code I am using: <!-- Navbar --> < ...
I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...
Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...
I am looking to add a slider feature to my "Prices" page in order to provide customers with an instant quote based on the quantity they select. The slider should range from 1 to 500 or even up to 1000, but having an input box for customers to enter the qu ...
I've been pondering this question: What exactly is the functional distinction between these two code snippets, if any? I'm not certain how the use of a comma impacts statements. Does the #page > have an influence on the link in the first examp ...
I've created a styled component as shown below: const FormBox = styled(Box)(({ theme }) => ({ width: "47vw", height: "25vh", backgroundColor: theme.palette.grey[100], borderRadius: theme.shape.borderRadius, marginLeft: ...
I've been working on a Materialize project and encountering an issue with pre-filled values in text boxes. Here is a snapshot of the problem: https://i.stack.imgur.com/u13jT.png <div class="input-field col s12 m6"> <input class="" id="us ...
I am facing an issue where I am trying to place a media list inside a Bootstrap card. However, when I zoom in on the browser, the media list <ul/> overflows from the modal-body and goes out of the Bootstrap card. How can I ensure that the media list ...