Is it possible to maintain child divs in a single line?

Question

Is it possible to maintain child divs in a single line?

Despite trying numerous recommendations (many involving white-space:nowrap and display:inline-block), I have been unsuccessful in keeping these child divs on a single line with horizontal scrolling.

This is my code:

<div id="list">
    <a href="javascript:show('shown','id1','a1');"><div id="a1" class="inactive">link1</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id2','a2');"><div id="a2" class="inactive">link2</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id3','a3');"><div id="a3" class="inactive">link3</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id4','a4');"><div id="a4" class="inactive">link4</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id5','a5');"><div id="a5" class="inactive">link5</div></a>
    <div id="spacer"></div>
    <a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">link6</div></a>
</div>

In essence, this serves as a mobile navigation bar that scrolls horizontally.

The regular version of the bar is vertical (working correctly) and the "spacer" div acts as a separator, transitioning from a horizontal rule to a vertical rule.

css html parent-child

Answer 1

Answer №1

If you want to prevent line breaks in your text, use the CSS property white-space: nowrap;

Check out this demo for reference

#list {
    white-space: nowrap;
}
#list a, #list a div, #list .spacer {
    display: inline-block;
}
#list a {
    /* Additional styling for demonstration purposes */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 50px;
}

IMPORTANT NOTE: IDs should be unique on a page. Avoid using multiple elements with the same ID like #spacer. Instead, consider using classes for repeated elements.

Answer 2

If you want to prevent line breaks in your text, use the CSS property white-space: nowrap;

Check out this demo for reference

#list {
    white-space: nowrap;
}
#list a, #list a div, #list .spacer {
    display: inline-block;
}
#list a {
    /* Additional styling for demonstration purposes */
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 50px;
}

IMPORTANT NOTE: IDs should be unique on a page. Avoid using multiple elements with the same ID like #spacer. Instead, consider using classes for repeated elements.

Answer 3

Answer №2

You've got a mix of inline and block elements.

To optimize, set them all to display:inline-block; and make use of the white-space property.

#list {
  white-space:nowrap;
}
#list div ,
#list a {
  display:inline-block;
  white-space:normal;
  vertical-align:middle/* or specify another value*/
}

Answer 4

You've got a mix of inline and block elements.

To optimize, set them all to display:inline-block; and make use of the white-space property.

#list {
  white-space:nowrap;
}
#list div ,
#list a {
  display:inline-block;
  white-space:normal;
  vertical-align:middle/* or specify another value*/
}

Answer 5

Answer №3

Instead of altering the children's CSS like some other solutions suggest, I recommend simply converting the list to a flex layout:

All that is needed is to switch the list to be inline-flex, as shown here:

#list {
  display: inline-flex;  
}

/* emulating the spacer you mentioned */
#spacer { width: 10px; height:10px; }

<div id="list">
    <a><div>link1</div></a>
    <div id="spacer"></div>
    <a><div>link2</div></a>
    <div id="spacer"></div>
    <a><div>link3</div></a>
    <div id="spacer"></div>
    <a><div>link4</div></a>
    <div id="spacer"></div>
   <a><div>link5</div></a>
    <div id="spacer"></div>
    <a><div>link6</div></a>
</div>

Answer 6

Instead of altering the children's CSS like some other solutions suggest, I recommend simply converting the list to a flex layout:

All that is needed is to switch the list to be inline-flex, as shown here:

#list {
  display: inline-flex;  
}

/* emulating the spacer you mentioned */
#spacer { width: 10px; height:10px; }

<div id="list">
    <a><div>link1</div></a>
    <div id="spacer"></div>
    <a><div>link2</div></a>
    <div id="spacer"></div>
    <a><div>link3</div></a>
    <div id="spacer"></div>
    <a><div>link4</div></a>
    <div id="spacer"></div>
   <a><div>link5</div></a>
    <div id="spacer"></div>
    <a><div>link6</div></a>
</div>

Is it possible to maintain child divs in a single line?

This is my code:

Answer №1

Answer №2

Answer №3

Similar questions

Guide on utilizing every array value during each iteration of a for loop, ensuring that the same number of values

The issue of CSS3 Grid-gap not functioning properly on iPhone devices

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

Guide on displaying a real-time "Last Refreshed" message on a webpage that automatically updates to show the time passed since the last API request

Expanding CSS styles on hover

Resource loading error: The server returned a 404 (Not Found) status code, as shown in the console

The dominance of CSS specificity in favor of the flex property compared to flex-basis

Prevent draggable functionality of jQuery UI on elements with a specific class

What methods can I use to prevent a number from becoming negative?

I desire a smooth fade-in transition for the background image when the addClass function is

Inject Custom ASP Control Script into the DOM dynamically upon registration

Is it possible to modify the value on the src img tag prior to scraping the data

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

Achieving Center Alignment for Material-UI's <Table> within a <div> using ReactJS

Guide on Creating HTML Embeds for Multiple Selection Code Blocks

Challenges arise with the height settings of ui-grid

Strange outcomes observed with array created from HTML code

What could be preventing my image from displaying in the header section?

Real-time audio feed permanently stuck in Chromium-powered web browsers