Struggling to show labels in the correct position for each button?

Question

Struggling to show labels in the correct position for each button?

I need help with aligning labels under buttons. I have 3 buttons, each with a corresponding label. I want the labels to be displayed in line under the buttons, and if the length of a label exceeds the button width, it should wrap to the next line. I've tried using CSS but it's not working as expected. Can anyone provide suggestions on what I should consider?

html

   echo '<input type=submit class=btn  id=\"'.$row['UniqueAdvertisingCode'].'\" value=REDEEM    > ';
   echo '<input type=submit class=btn id=\"'.$row['UniqueAdvertisingCode'].'\"  value=BUY       > ';
   echo '<input type=submit class=btn id=\"'.$row['UniqueAdvertisingCode'].'\"  value= POUCHIT > <br>';

   echo ' <label class=lbl>Select Redeem when ready to use coupon at location</label>   ';
   echo ' <label class=lbl>Select Buy when ready to purchase product at location</label>   ';
   echo ' <label class=lbl>Save coupon for later</label>   ';

css

  <style>
  .btn {
    width: 15em;  height: 4em;
   }


   .lbl{
       width: 15em;   height: 4em;

   }
  </style>

html css

Answer 1

Answer №1

If you set a specific width for each button, this solution should work effectively:

<label class="lbl">Select Redeem when ready to use coupon at location</label>
<input class="btn" value="Redeem" type="submit" id="redeem">

<label class="lbl">Select Buy when ready to purchase product at location</label>
<input class="btn" value="Buy" type="submit" id="buy">

<label class="lbl">Save coupon for later</label>
<input class="btn" value="Pouchit" type="submit" id="pouchit">

Additionally, ensure the following CSS styling is included:

.btn {
  height: 4em;
  width: 15em;
}
.lbl {
  position: absolute;
  top: 4em;
  width: 12em;
}

To view a demonstration of this setup, visit the jsfiddle link provided below:

Check out this updated version on jsfiddle:

http://jsfiddle.net/FwhvR/1/

Please note: An improved version has been created in response to feedback regarding screen widths:

http://jsfiddle.net/FwhvR/2/

Answer 2

If you set a specific width for each button, this solution should work effectively:

<label class="lbl">Select Redeem when ready to use coupon at location</label>
<input class="btn" value="Redeem" type="submit" id="redeem">

<label class="lbl">Select Buy when ready to purchase product at location</label>
<input class="btn" value="Buy" type="submit" id="buy">

<label class="lbl">Save coupon for later</label>
<input class="btn" value="Pouchit" type="submit" id="pouchit">

Additionally, ensure the following CSS styling is included:

.btn {
  height: 4em;
  width: 15em;
}
.lbl {
  position: absolute;
  top: 4em;
  width: 12em;
}

To view a demonstration of this setup, visit the jsfiddle link provided below:

Check out this updated version on jsfiddle:

http://jsfiddle.net/FwhvR/1/

Please note: An improved version has been created in response to feedback regarding screen widths:

http://jsfiddle.net/FwhvR/2/

Answer 3

Answer №2

Check out the code snippet below:

echo ' <label class="lbl">Choose Redeem to use your coupon at the location</label>';
echo '<input type=submit class=btn  id="'.$row['UniqueAdvertisingCode'].'" value="REDEEM"><br>';
echo ' <label class="lbl">Select Buy when ready to make a purchase at the location</label> <br>';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value="BUY"> ';
echo ' <label class="lbl">Save the coupon for later use</label> <br> ';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value= "POUCHIT" > <br>';

View DEMO

Please Note: The buttons may appear distorted due to excessive css height settings.

Answer 4

Check out the code snippet below:

echo ' <label class="lbl">Choose Redeem to use your coupon at the location</label>';
echo '<input type=submit class=btn  id="'.$row['UniqueAdvertisingCode'].'" value="REDEEM"><br>';
echo ' <label class="lbl">Select Buy when ready to make a purchase at the location</label> <br>';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value="BUY"> ';
echo ' <label class="lbl">Save the coupon for later use</label> <br> ';
echo '<input type=submit class=btn id="'.$row['UniqueAdvertisingCode'].'"  value= "POUCHIT" > <br>';

View DEMO

Please Note: The buttons may appear distorted due to excessive css height settings.

Struggling to show labels in the correct position for each button?

Answer №1

Answer №2

View DEMO

Similar questions

Ways to divide the header column of a bootstrap 4 table?

Aligning Content in the Middle of a Bootstrap Row

attempting to display an element using jQuery that belongs to the identical class

The checkboxes seem to be malfunctioning following an ajax request

Troubleshooting: Node.js not receiving data from HTML form

JavaScript file isn't being called by index.html

The alert box is not displaying, only the text within the tags is visible

Organizing AngularJS Data by Initial Letter with the <select></select> HTML Element

Blend a background image using rgba without incorporating a gradient effect

JavaScript: retrieving undefined value from a text element

Expanding the width of an image beyond its parent <div> without compromising on vertical space

Issue encountered while trying to exhibit jpg image content from server side on html

Preload-webpack-plugin does not support pre-fetching files

Try implementing a body template when using the mailto function

Access the configuration of a web browser

What is the proper way to select the <ul> element within an FTL template?

"Adjusting the height of Material UI card content to ensure fixed positioning at the bottom

Creating dynamic web content using KaTeX and Node.js

Issues with Header and Nav tags functionality in Internet Explorer 11 persist post deployment

Using Python API to directly upload web files to Drive via URL