What is the best way to position a label in conjunction with wrapping tags?

I have a label and multiple tags that might span multiple lines:

.container {
  background-color: #ddd;
  display: flex;
  width: 200px;
  margin-bottom: 50px;
}

.label {
  margin-right: 10px;
}

.boxes-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  display: inline-block;
  height: 40px;
  width: 60px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: blue;
}
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  </span>
</div>
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  </span>
</div>

This is the current layout:

https://i.sstatic.net/RfcZK.png

I want to achieve the following objectives:

  1. Ensure the label and the first row of tags are aligned along the same horizontal line.
  2. Eliminate the extra space below the last line of tags while maintaining the space between the two rows of tags.

Here is how I envision the desired result:

https://i.sstatic.net/E6mql.png

What steps should I take to accomplish this?

htmlcssflexboxalignment

Answer №1

I adjusted the margin-bottom of the last and second-to-last child elements to 0px, and applied vertical-align: middle along with a line-height matching the height of the .box class to the .label class.

.container {
  background-color: #ddd;
  display: flex;
  width: 200px;
  margin-bottom: 50px;
}

.label {
  margin-right: 10px;
  line-height:40px;
  vertical-align:middle;
}

.boxes-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  display: inline-block;
  height: 40px;
  width: 60px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: blue;
}

.box:last-child,.box:nth-last-child(2) {
  margin-bottom: 0px;
}
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  </span>
</div>
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  </span>
</div>

Answer №2

Give this a shot. CSS has been included:

.boxes-container .box:nth-last-of-type(-n+2) {
   margin-bottom: 0;
}
.label {  
   margin-top: 8px;
}


.container {
  background-color: #ddd;
  display: flex;
  width: 200px;
  margin-bottom: 50px;
}

.label {
  margin-right: 10px;
  margin-top: 8px;
}

.boxes-container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  display: inline-block;
  height: 40px;
  width: 60px;
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: blue;
}
.boxes-container .box:nth-last-of-type(-n+2) {
  margin-bottom: 0;
}
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  </span>
</div>
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  </span>
</div>

Answer №3

There are various approaches to solving this issue, with one method utilizing the flex property to align the label:

.label {
  height: 40px;
  display: flex;
  align-items: center;
}

If the box's height is fixed, setting the .label height the same and using flex to center its content can be a practical solution. Alternatively, a concise single-line fix could involve specifying line-height: 40px, assuming the label's content does not wrap.

To eliminate the excess space after the last two elements in each .boxes-container, check out my approach demonstrated in thisCodepen demo. Additionally, ankita patel's answer offers an elegant solution targeting the last two .box elements:

.box:nth-last-of-type(-n+2)

Answer №4

To create a simple solution, you can adjust the margins within your layout. It's worth noting that relying on an nth-child approach may not be effective if the wrapping of elements changes:

  1. Start by setting margin: 5px for the box to replace the existing 10px margins on the right and bottom.

  2. For the wrapping container boxes-container, you can use negative margin values like margin: -5px to align the box elements against the edges.

This adjustment should resolve most issues apart from the alignment of the label. Due to the varying sizes of box elements and different widths of box-container, there isn't a one-size-fits-all solution. You may need to apply some margin-top specifically to align it correctly.

You can view the demo provided below:

.container {
  background-color: #ddd;
  display: flex;
  width: 200px;
  margin-bottom: 50px;
}

.label {
  margin-right: 10px;
  margin-top: 10px; /* Adjust as needed */
}

.boxes-container {
  display: flex;
  flex-wrap: wrap;
  margin: -5px; /* Update with negative value */
}

.box {
  display: inline-block;
  height: 40px;
  width: 60px;
  margin: 5px; /* Apply margin adjustments */
  background-color: blue;
}
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  </span>
</div>
<div class="container">
  <label class="label">Tags:</label>
  <span class="boxes-container">
      <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  </span>
</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

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

JavaScript Slideshow Transition Techniques

I'm struggling to create a slideshow gallery using Javascript. However, I'm facing an issue where the code instantly jumps from ferrari.jpg to veyron.jpg, completely skipping over lamborghini.jpg. <!DOCTYPE html> <html> <head> ...

javascripthtmlslideshow

overlay the div or image with a translucent color

I have a div containing an image with the results from my database, carefully designed and positioned within each div. However, I would like to highlight certain results by overlaying them with a color. I am seeking a method to achieve this effect withou ...

css

Unable to see the column filter in the data table

My datatable setup includes the column filter js on the page, everything is displaying and working smoothly without any errors in the console. However, after the smoothness loads, the inputs at the bottom are not visible. <body> <div id="stab ...

javascriptphpjqueryhtmldatatables

Generating a new division element with a unique identifier and subsequently making adjustments to it

Just starting out with HTML and JS here, so please excuse my lack of experience and not-so-great English. I have an ID on an HTML element that I want to add content to using a function. Additionally, I need to create another element (inside the first one) ...

javascripthtmlbootstrap-4frontende-commerce

In Angular 10, the custom CSS URL is loading after the standard styles.css file

Below is the configuration from my angular.json file: "options": { "outputPath": "dist/example", "index": "src/index.html", "main": "src/main.ts", ...

cssangularsassangular10

What is the best way to make a black background div that perfectly aligns with another div?

When hovering over an image, I want it to fade out to opacity: 0.4, but instead of fading to white, I would like it to fade to black. To achieve this, I decided to change the background color of the body to black so that the fadeout will be towards black. ...

htmlcss

Exclusive Functionality: Bootstrap Drop Down Navigation in ASP.NET Only Functions on Main Pages

I am in the process of developing an internal application with ASP.NET 4.0 using the Yeti Bootstrap Theme. One issue I am encountering is with the navbar dropdown navigation. Pages that are located in the website's root can utilize the dropdown featu ...

jqueryhtmlcssasp.nettwitter-bootstrap

Are the keyboard settings for FileUpload different between IE and Firefox?

When using Apache's File Upload, I noticed a difference in behavior between Internet Explorer and Firefox. In IE, pressing "tab" and then "enter" on the Browse button submits the form instead of opening an option to browse. However, clicking the space ...

htmlfirefoxinternet-explorer

Using REST API and AngularJS to sign in to asp.net

After successfully implementing a login page in ASP.NET with AngularJS and REST API integration, I am now looking to add an auto-generated token for added security measures. How can I achieve this login operation in ASP.NET using AngularJS and REST API? ...

javascriptjqueryhtmlcssangularjs

Incorporate this form created externally onto my website

I have been working on my website and I am looking to incorporate a form that opens up once the login button is clicked. This form was generated using an online form builder which provides an embed code for seamless integration onto websites. Below, you wi ...

javascripthtmlcss

Troubleshooting: CSS causing images to not show up on

Struggling with a CSS issue, I can't seem to solve it. My images are not showing up on the webpage even though the URLs are correct and the HTML is properly written. There is no specific styling applied to the images, and the only styling for the ima ...

htmlcssimage

Is it acceptable to use a readonly input with an HTML5 datalist?

Within my application, there is an html5 datalist implemented as shown below: <input type="text" list="mydatalist" /> <datalist id="mydatalist"> <option>Option 1</option> <option>Option 2</option> <option> ...

htmlhtml-datalist

JQuery functions for click and hover are not functioning as expected on a div element

I am having trouble with a div that I have declared. The click event is not working as expected, and I also need to use the :hover event in the css, but it isn't functioning either. What could be causing this issue? <div id="info-button" class="in ...

jqueryhtmlcss

Is the IE7 Modal Dialog Misaligned?

Update After some investigation, I discovered the root cause of the problem. In my code, I was referencing the height of the overlay, which resulted in different values in IE7 compared to other browsers. To resolve this issue, I adjusted the code to refe ...

javascriptjquerycssjquery-uimodal-dialog

Ways to align this element in the middle

<div id="1" style="display:block"> <div class="radio"> <label><input type="radio" name="o1"> <input type="text" class="form-control" id="opt1"></label> </div> <div class="radio"> <label>< ...

javascripthtmlcss

Tips for minimizing the arrow size in the infowindow on a Google Maps interface

As a newcomer to customizing Google Maps, I am looking to decrease the size of the arrow in the infowindow and position it in the bottom left corner for a better appearance. I am struggling to figure out how to adjust the height and width of the arrow and ...

jquerycssgoogle-mapsgoogle-maps-api-3

Aptana throws a fit over a script that's as empty as

Within Aptana, I am encountering an issue with the following line of code: <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.js"></script> Alternatively, it could be written as: <script type="text/javascript" charset="ut ...

htmlxhtmlaptanaaptana3

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

htmlcssbootstrap-4accordionpanel

Incorporate an icon into a text input field using Material UI and React

I have a form with a text input element: <FormControl className='searchOrder'> <input className='form-control' type='text' placeholder='Search order' aria-label='Search&ap ...

javascripthtmlcssreactjsmaterial-ui