Button refuses to align with the list bullet

Starting over from scratch.

Can someone assist me in aligning the button and pseudo-bullet on the same line, even if the button text spans multiple lines?

This is the HTML code:

<ol>
    <li>
        <button>What happens when the button gets very long? Will it still display correctly or will something go wrong? Hmm... </button>
         <p>Answer!</p>
     </li>
</ol>

Here's the CSS code:

ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
    counter-reset: item;
}

ol li {
    margin: 0;
    background-color: darkcyan;
    display: block;
}

ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    background-color: darkgoldenrod;
}

ol button {
    display: inline;
    vertical-align: middle;
    text-align: justify;
    font-family: Segoe UI;
    font-size: 1em;
    color: #EEE;
}

View the JSFiddle demo here.

css

Answer №1

To start, the custom list counter (::before) needs to be separated from the content by creating a wrapper around it. By implementing Flexbox, you can then easily manage the list counter directly from the content. Additionally, there were counting issues with the list items that could be resolved by targeting only the direct descendants of the parent.

.ordered-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  counter-reset: item;
  display: inline;
  color: #C5BF9E;
}

.ordered-list > li {
  display: flex;
  flex-direction: row;
}

.ordered-list > li::before {
  content: counter(item) "";
  counter-increment: item;
  margin-right: 17px;
}

.ordered-list p {
  margin-top: 0;
}
<ol class="ordered-list">
  <li>
    <div class="content">
      ...
</ol>

Link to code example

Answer №2

To ensure the button does not exceed a certain width, you can adjust its size:

.dialogue-container ol button{
width: calc(100% - 15px);
}

The value of 15px represents the amount of space allocated for numbers.

If you wish to keep the button's position unchanged upon clicking, it is necessary to specify the width of the before elements as well. To implement this change effectively, add display block and set float right:

.dialogue-container ol li::before {
    display: block;
    width: 15px;
    float: left;
}

Answer №3

After uncovering a viable solution, I felt compelled to share it here.

The inspiration came from Shashi Lo's suggestion to utilize flexbox, but I had to adapt the approach to avoid any unforeseen consequences.

Here is the outcome:

https://jsfiddle.net/cdjc6fk5/

HTML

<ol>
    <li>
        <button type="button">Ihr woll<span style="letter-spacing: 1.5px">t</span>, dass ich <span style="letter-spacing: 1.3px">f</span>ür Eu<span style="letter-spacing: 1.3px">r</span>e schlec<span style="letter-spacing: 0.9px">h</span><span style="letter-spacing: 1px">t</span>en E<span style="letter-spacing: 0.9px">n</span><span style="letter-spacing: 1.5px">t</span>scheidungen b<span style="letter-spacing: 1.3px">e</span><span style="letter-spacing: 1.5px">z</span>ahle?</button>
    </li>

    <p>
        Wenn Ihr das so sag<span style="letter-spacing: 1.5px">t</span>, klin<span style="letter-spacing: 1px">g</span>t das i<span style="letter-spacing: 1.5px">r</span>gen<span style="letter-spacing: 1px">d</span><span style="letter-spacing: 1.2px">w</span>ie <span style="letter-spacing: 1.5px">v</span>iel schlimmer. <br>Se<span style="letter-spacing: 0.9px">h</span>t es als Da<span style="letter-spacing: 1.5px">r</span>lehen a<span style="letter-spacing: 1.5px">n</span>. Ihr <span style="letter-spacing: 1.3px">w</span>i<span style="letter-spacing: 0.9px">s</span><span style="letter-spacing: 1.3px">s</span><span style="letter-spacing: 1.5px">t</span>, dass ich es <span style="letter-spacing: 1.2px">z</span>u<span style="letter-spacing: 1.5px">r</span>ü<span style="letter-spacing: 1px">c</span><span style="letter-spacing: 2.3px">k</span><span style="letter-spacing: 1.5px">z</span>ahlen kan<span style="letter-spacing: 1.5px">n</span>. Ich habe ein eh<span style="letter-spacing: 1.5px">r</span>liches Gesich<span style="letter-spacing: 2px">t</span>.

    </p>

</ol>

CSS

ol {
margin: 4px 0 0 24px;
padding: 0;
background-color: limegreen;
list-style-type: none;
counter-reset: item;
}

ol li {
background-color: darkcyan;
margin: 0;
padding: 0;
display: flex;
flex-wrap: nowrap;
}

ol li::before {
width: 16px;
background-color: darkred;
counter-increment: item;
content: counter(item) "";
font-family: Segoe UI Semibold;
color: #C5BF9E;
}

button {
width: 100%;
margin: 0;
padding: 0;
background-color: black;
border: none;
outline: none;
vertical-align: top;
text-align: justify;
font-family: Segoe UI;
font-size: 1em;
color: #C5BF9E;
cursor: pointer;
}

button:hover { color: #EECA2A; }

ol p {
width: calc(100% - 16px);
margin: 0;
padding-left: 16px;
background-color: red;
font-family: Segoe UI;
font-size: 1em;
}

Answer №4

To keep the button on the same row without using floating, simply adjust the width to be smaller than 100%. For example, you can use width: 95%; or any other percentage that suits your design.

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

designing a unique organizational chart layout with HTML and CSS

I'm facing a challenge in creating a customized organizational chart layout using HTML and CSS. Despite my efforts, I am having difficulties achieving the desired structure that includes parent, child, and grandchild nodes connected in a specific way. ...

htmlcssbootstrap-4responsive-design

Incorporating Anchors for Seamless Navigation in Menus

My website has various sections on the homepage and I want to add an anchor link to the navigation. This will allow users to scroll down to a specific section, like "About Us," when clicking on the appropriate nav link. I also need the anchor link to work ...

htmlcssnavigationanchor

Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...

htmlcssgithub-pages

When the webpage is launched, the font styles specified in the CSS do not take effect and

As a beginning coder, I have encountered a small issue. In my HTML document, I attempted to set the font types of my paragraphs and headings to Arial using CSS. The code snippet is as follows: h4{ font-family arial san-serif; } However, when I run the c ...

css

jQuery UI DatePicker: without any styling, no picking dates

I'm struggling to configure a jQuery UI DatePicker. I moved the development-bundle folder contents to the directory res/jqueryui and initialized two datepickers as shown below: <script src="res/jquery-2.1.0.min.js"></script> <script sr ...

jquerycssjquery-uidatepickerjquery-ui-datepicker

The <pre> element is not compatible with Bootstrap 4 modals

Attempting to integrate the <pre> tag within a bootstrap 4 modal has proven unsuccessful. The JSON content placed inside the <pre> tag is not displaying properly. Unsure of the missing element causing this issue: Sample HTML code used: < ...

htmlcssbootstrap-4

Installing Fontawesome 4.3

I recently downloaded the Fontawesome pack, which includes css, Less, and other supporting files. I have successfully copied these files to my website. My website is running on the Gantry framework, which requires me to edit the Head Section in order to a ...

cssfont-awesome

Creating a Bootstrap carousel with a caption placed on the right side - here's how!

How can I get the caption to appear on the right side instead of the left side? Here is the CSS code I am using: #jumboCarousel { margin-top: 70px; min-height: 300px; max-height: 600px; min-width: 100%; } #jumboCarousel img { min-heig ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to position the left sidebar on top of the other components and shift them to the

Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...

javascriptcssreactjs

Design interactive horizontal buttons containing images and corresponding labels using HTML5

I want to create three horizontal buttons with images and labels underneath using HTML5. I attempted to follow this example: tutorial, but I need a different image for each button. When I give each button an ID and add #id {background-image:url} to the CS ...

htmlcss

What methods can I utilize to increase the speed of my JavaScript animation?

Recently, I implemented a Vue component designed to loop a div over the X axis. While it functions correctly, I can't help but notice that it is consuming an excessive amount of CPU. I am interested in optimizing this animation for better performance. ...

javascripthtmlcssvue.jscss-transitions

The display:flex property with justify-content:space-around is malfunctioning in React and causing issues

I've been trying to troubleshoot the issue with my header, but so far I haven't found a solution. Could you please take a look at my code first? // Code simplified for clarity, no need to worry about variables const Header = () => { return ...

javascripthtmlcssreactjs

Create a fixed content scroll effect with an inset box-shadow

I recently stumbled upon a solution at Stack Overflow that effectively created an inset box shadow beneath content. However, I encountered an issue when the outer container div needed to be scrolling due to overflow - the inner div with the box shadow woul ...

htmlcssoverflowbox-shadow

Using CSS to style an alternate list elements to float

I'm working on a webpage that displays messages from a database using ajax. Currently, the output is just stacked downwards. I'm hoping to style the list elements to alternate from left to right, similar to an iOS Message chat. Does anyone have ...

htmlcss

How can I remove the div container every time the submit button is clicked?

I am currently working on a form that is capturing values as shown below. <form role="form" id="calculate"> <div class="form-group"> <select class="form-control" id="paper"> < ...

javascripthtmlcss

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

Currently, I am working on adding a font resizer feature to my editing tool. To implement this, I made some changes to the text elements where their origin is now set to the bottom left corner. The normal version of the tool works perfectly fine, but when ...

javascriptjqueryhtmlcsscss-transforms

Implementing a pop-up notification at the center of the display for empty fields

I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...

javascripthtmlcsspopupwindow

Exploring React's Primary Button Color Implementation

I am attempting to customize the buttons in my theme for various states such as contained, primary, and hover. However, my current approach is not yielding the desired results. VIEW CODESANDBOX DEMO: CLICK HERE theme/overrides/MuiButton.js import palet ...

cssreactjsmaterial-uijss

Mobile display issue with CSS columns when using the :checked pseudo class

I have embarked on the creation of a portfolio website that relies solely on CSS3 to present a grid and filter out thumbnail images. If you're curious about what I've accomplished so far, feel free to take a look here. To achieve the filtering ...

cssgridmobile-safaripseudo-class

Tips for handling null input values when saving to a database

<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...

phphtmlcssmysqldatabase