Utilizing HTML and CSS to Position Text Adjacent to the Initial and Final Elements in a Vertical List

Exploring a simple number scale ranging from 1 to 10, I experimented with different ways to represent it. Here's my attempt:

<div class="rate-container">
<p class="first">Extremely Unlikely</p>
  <a class="rate">1</a>
  <a class="rate">2</a>
  <a class="rate">3</a>
  <a class="rate">4</a>
  <a class="rate">5</a>
  <a class="rate">6</a>
  <a class="rate">7</a>
  <a class="rate">8</a>
  <a class="rate">9</a>
  <a class="rate">10</a>
<p class="first">Extremely Likely</p>
</div>

In order to have the text appear right next to the numbers 1 and 10, I used a table structured like this.

 <table>
        <tr>
            <td> <a class="rate">1</a> </td>
            <td>
                <p class="first">Extremely Unlikely</p>
            </td>
        </tr>
        <tr>
            <td><a class="rate">2</td>
        </tr>
        <tr>
            <td><a class="rate">3</td>
        </tr>
        <tr>
            <td><a class="rate">4</td>
        </tr>
        <tr>
            <td><a class="rate">5</td>
        </tr>
        <tr>
            <td><a class="rate">6</td>
        </tr>
        <tr>
            <td><a class="rate">7</td>
        </tr>
        <tr>
            <td><a class="rate">8</td>
        </tr>
        <tr>
            <td><a class="rate">9</td>
        </tr>
        <tr>
            <td><a class="rate">10</td>
            <td>
                <p class="last">Extremely Likely</p>
            </td>
        </tr>
    </table>

Despite attempting techniques like flexbox and other CSS properties, I struggled to properly align the text without making compromises in other areas. Any advice or guidance would be greatly appreciated!

htmlcss

Answer №1

<div class="rate-container">
  <a class="rate">1</a><br>
  <p class="first">Extremely Unlikely</p><br>
  <a class="rate">2</a>
  <a class="rate">3</a>
  <a class="rate">4</a>
  <a class="rate">5</a>
  <a class="rate">6</a>
  <a class="rate">7</a>
  <a class="rate">8</a>
  <a class="rate">9</a><br>
  <a class="rate">10</a><br>
  <p class="first">Extremely Likely</p>
</div>

CSS:

div.rate-container {
        display: flex;
        flex-direction: column;
        }
        p,a {
            display: inline;
        }

You could simplify by using <br> for line breaks instead of nested divs, keeping p and a elements inlined. However, excessive use of <br> tags can clutter the code.

Answer №2

If you want to add annotations to certain values without cluttering your content, consider using pseudo elements in CSS.

This code snippet demonstrates how to use after pseudo elements on the first and last child of a list while removing unnecessary p elements.

.rate {
  display: block;
}

.rate-container a:first-child::after {
  content: '\00a0 \00a0 Extremely unlikely';
}

.rate-container a:last-child::after {
  content: '\00a0 Extremely likely';
}
<div class="rate-container">
  <a class="rate">1</a>
  <a class="rate">2</a>
  <a class="rate">3</a>
  <a class="rate">4</a>
  <a class="rate">5</a>
  <a class="rate">6</a>
  <a class="rate">7</a>
  <a class="rate">8</a>
  <a class="rate">9</a>
  <a class="rate">10</a>
</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

The div element moves to the right as soon as the drop-down menu pops up

Currently, I am facing an issue with aligning an image inside a div that is centered in an outer-wrapper. The outer-wrapper contains a horizontal menu at the top with 5 sub divs displayed inline. I have implemented CSS for a drop-down menu that appears whe ...

htmlcssoverlapping

Avoid letting words be separated

My question involves HTML code <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">Lorem Ipsum</div> When I view this on a mobile device, the text appears as follows: Lorem Ip- sum I ...

htmlcss

Setting a radio button as default based on a variable value can be accomplished by following a few

I am working with 2 radio buttons and I need to dynamically check one based on a variable value. <input type="radio" name="team" id="team_7" value="7"> <input type="radio" name="team" id="team_8" value="8"> The variable number is set dependin ...

javascriptjqueryhtml

View the text notes information stored in a database, make changes to them, and then update and save the modified data using NodeJs

Currently developing a website that allows users to register, login, write text notes in a text area, save them in a database, and view those saved notes on a separate page. Additionally, users should be able to click on a note from the list and have it ...

htmlmysqlnode.jsexpress

Utilization of z-index with float: left within an image gallery in CSS

Currently, I am working on an image gallery that has content generated randomly. In terms of CSS, the images are positioned using the following code: .item { width: 200px; margin: 10px; float: left; } To add some functionality, I have implemented ...

jqueryhtmlcsscss-floatz-index

What could be causing the movement of my main navigation links when hovering over another top-level element?

I am struggling to pinpoint the origin of a particular issue I am encountering with my menu. The problem arises when I hover over a top-level element, causing all elements below it to shift to the right: (Take note of the top-level elements being affected ...

htmlcss

Tips on activating the overlay solely on the image without affecting the entire column

Currently, I am working on a project locally and do not plan to release it. However, I am facing an issue with making the overlay only appear on the image rather than covering the entire column. I came across some pre-built code on the w3 schools website ...

htmlcssbootstrap-5

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

htmlcssfaviconionicons

Placing text beside an image

I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...

phphtmlcss

What is the best way to create a Div element that functions as a button, becoming active when clicked while deactivating all other Div elements

function toggleButton1() { $("#button1").toggleClass("button-active button-inactive"); $("#button2").toggleClass("button-inactive button-active"); $("#button3").toggleClass("button-inactive button-active"); } function toggleButton2() { $("#butto ...

javascripthtmlcssbootstrap-4

"Exploring the insertion of a line break within the modal body of an Angular application

Is it possible to create a modal for error messages with multilined body messages without altering the modal template? Any assistance would be greatly appreciated. <div class="modal-body" > <p *ngIf="!_isTranslatable">{{_modalBody}}</p&g ...

htmlangular

Working condition may vary depending on the size of the item

I have integrated the Masonry jQuery plugin into my design, but it is not functioning properly. The CSS class mentioned in the documentation only includes: width: 25% For my purposes, I modified it to: width: 24% float: left margin-right: 5px This modi ...

jqueryhtmlcssmasonry

Adjust the path-clip to properly fill the SVG

Is there a way to adjust the clip-path registration so that the line fills correctly along its path instead of top to bottom? Refer to the screenshots for an example. You can view the entire SVG and see how the animation works on codepen, where it is contr ...

javascripthtmlcssanimationsvg

I need assistance from someone knowledgeable in HTML and CSS. I am trying to create a div that dynamically increases its width until it reaches a specific

Seeking assistance to create a dynamic div that continuously expands its width until it reaches a maximum of 540px. It should start at 75px. Below is the HTML and CSS code I've attempted: .Loading-Screen { background-color: black; color: alicebl ...

javascripthtmlcss

Experiencing an issue while rendering due to the presence of display: table-cell;

I am currently in the process of developing a website. The HTML Header section is structured as follows: <div id="page"> <header> <a href="#" class="redsquare">&nbsp;</a> <div class="head-wrapper"> ...

htmlcsstablecell

PHP unable to display HTML form element using its designated ID attribute

I've been experiencing some difficulties with PHP echoing a label element that contains an ID attribute within an HTML form. My intention was to utilize the ID attribute in order to avoid having to modify the JS code to use the name attribute instead. ...

javascriptphphtml

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

I am working on creating a switch button with CSS and JavaScript that needs an animation when toggling or clicked. The only issue I am facing is related to the animation. I am wondering if there might be any problem with the positioning (relative, absol ...

javascripthtmlcss

Achieve the highest character count possible within HTML elements

Is it possible for a standard HTML element with defined width and height to manage characters using JavaScript, as shown in the code snippet below? <div id="text-habdler-with-width-and-height" ></div> <script> $("element& ...

javascripthtmlcss

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to customize the background color when the Bootstrap 4 toggle switch is in the "checked" position?

I'm struggling to find a way to adjust the background color of the "checked" state for this toggle switch in Bootstrap 4. It utilizes an additional library for toggling between dark and light modes - you can find it here on github. While that function ...

csscheckboxbootstrap-4