I am trying to align a row of three elements in a specific way. The first element should be floated left, the third element floated right, and I need the second element to float centrally between them. However, all three elements will have dynamic widths so I cannot use a set margin.
You can view my example at http://jsfiddle.net/S5fA3/
<div class="col-md-12 tags">
<a class="tag" href="/">Lorem</a>
<a class="tag" href="/">Dolorsitamet</a>
<a class="tag" href="/">ipsum</a>
</div>
Here is an example of how to achieve this:
CSS Styling
.tags {
padding:15px;
text-align: center; /*center all tags */
}
.tags a.tag {
display: inline-block; /* change to inline-block*/
font-size:16px;
height:40px;
padding:9px 15px;
text-decoration:none;
width:auto;
}
.tags a.tag:nth-child(1) { /* float first left */
float:left;
}
.tags a.tag:nth-child(3n) { /* float last right */
float:right;
}
.tags {
background:#55616F;
}
.tags a.tag {
background:#93A1AF;
color:#FFFFFF;
}
If you're considering delving into the world of CSS3, take a look at the innovative flexbox specification. While it functions flawlessly, please note that it may not be supported in older browsers (vendor prefixes are available for slightly outdated browsers):
.tags {
display: flex;
justify-content: space-between;
padding: 15px;
}
.tags a.tag {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
/* Can be combined into shorthand:
flex: 0 0 auto;
*/
font-size: 16px;
height: 40px;
padding: 9px 15px;
text-decoration: none;
}
.tags {
background: #55616F;
}
.tags a.tag {
background: #93A1AF;
color: #FFFFFF;
}
I am working with a validation form in Bootstrap4 that displays an error message when less than 5 characters are entered. If I enter 5 or more characters, I want to show a green check-mark and border around that specific input field. <div class="con ...
I'm encountering an issue with a Grid container that contains 2 Grid items. The height of the second Grid item exceeds the height of the container, causing a scroll bar to appear. Below is the code snippet for reference: function App() { return ( ...
Currently implementing Google web fonts in this manner: @font-face { font-family: "Vollkorn"; font-style: normal; font-weight: normal; src: local('Vollkorn Regular'), local('Vollkorn-Regular'), url('http://themes.googleuse ...
What is the best way to customize Bootstrap classes for specific blocks or modify default classes, like changing .row to .row_2, without impacting other elements styled with different Bootstrap classes? ...
When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...
I am having trouble creating a curve like the one shown below on my iPad. The color appears to be gray and does not work properly. Is this a bug with ChartJS or is there a solution to fix this issue? This problem occurs when the type value is set to "lin ...
I'm attempting to display an image from my project's directory as an icon instead of the standard "choose file" button. Unfortunately, my attempts thus far have been unsuccessful. Not only is the image not loading, but the original button is only ...
In creating a simple address panel, I have divided it into three sections: address, phone number, and email. Each section includes an icon and a paragraph next to it. To align these sections side by side, I used the vertical-align: top and display: table p ...
My main objective involves dynamically inserting images above text on any given page using a content script. The challenge lies in maintaining the proper alignment of the text after adding the images. To achieve this, I surround the words where the image i ...
Hey there, I've been working on creating a custom Tumblr-like button and tried adding an iframe above it to make it clickable. However, something seems to be off as it's not functioning properly. I'm still trying to wrap my head around how i ...
I recently started using the Material-Table component for a project I'm working on, and it's been great for managing tables with features like adding, editing, deleting, and searching rows. However, I've run into a few issues that I need hel ...
I am facing a challenge with my current setup: <div class="parent"> <div class="child"> </div> <div class="child"> </div> <div class="child"> </div> </div> My goal is to change the background co ...
Discover our test server here: Check out the box labeled "Organizers" on the top right corner... I've been struggling to bring the drop-down menu to the front layer. I've experimented with positioning and z-index, but so far, no success... Any ...
I have spent approximately 2 hours searching and attempting over 15 solutions, but none of them have been successful. The issue involves a slick-slider structured as follows: <section id="testimonial-section" class="pt-4 pb-0 px-4 bg-dark text-white"&g ...
The information in this dropdown menu is currently aligned to the left of the icon. I would like it to be aligned to the right. Thank you! <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releas ...
Here is an updated issue related to my previous question. I currently have a flawless code (DEMO) that works perfectly in Chrome and Firefox. However, it does not function properly in Internet Explorer. This is because IE does not support the use of displ ...
Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...
Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...
Check out my jsfiddle demo: http://jsfiddle.net/WLJUC/ I have noticed that when you click to rotate the larger container, it overlaps the smaller one. This poses a problem as I am attempting to create a picture gallery where users can rotate and enlarge ...
In my web application, there is a search field that allows users to enter tags for searching. The window should pop up directly below the search field as shown in this image: Image I am trying to figure out how the window positioning is actually d ...