Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How can I align inline paragraph elements better (without table)

Tags:

html

css

I am very new to web design and I would like help aligning p elements on a web page, just like Tab aligns things in a word processor. I have the following code:

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}

p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

@media screen and (min-width: 500px) {
  div.summary-container {
    margin: 10px 0px;
  }
  p {
    font-size: 12pt;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  p.normal {
    display: inline;
    margin-right: 2%;
    font-size: 12pt;
  }
  p.highlight {
    display: block;
    margin: 2px 0px 2px 0px;
    font-size: 12pt;
  }
  .billName {
    display: block;
  }
  .Norm9 {
    font-size: 8pt;
  }
  .tiny-ps {
    display: none;
  }
  .big-ps {
    display: inline-block;
  }
}
<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <p class="normal">Orders Shipped Today: 0</p>
    <p class="normal">Order&nbsp;Received: 14</p>
    <p class="normal">Payment&nbsp;Declined: 6</p>
    <p class="normal">Payment&nbsp;Authorized: 3</p>
    <p class="normal">Mgt&nbsp;Hold: 6</p>
    <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p class="normal">HELP&nbsp;ME: 1</p>
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>

What I cannot seem to figure out is how to get the text in the paragraphs to line up with the text in the other paragraphs and how to get the numbers to line up with each other. I want to do this without having to use a table. I can change the markup a little and add class names, but I do not want to use a table. It would look something like this: how i want it

Can anybody help me with this? Thank you!

like image 514
Leyla Zwolinski Avatar asked May 26 '21 16:05

Leyla Zwolinski

People also ask

How do you align inline block elements?

To align things in the inline direction, use the properties which begin with justify- . Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.

How do you make an inline block center in CSS?

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

How to display paragraph elements as inline elements using CSS?

The purpose of this article is to display paragraph elements as inline elements using CSS. The display property in CSS is used for placing the components (“div”, “hyperlink”, “heading”, etc) on the web page. The display property is set to inline. It has the default property of “anchor” tags. It is used to place the “div” inline i. e.

How to set the alignment of last paragraph to right using CSS?

To set the alignment of last paragraph to right, we use CSS text-align-last property. The text-align-last is used to set the last line of the paragraph just before the line break. The line break may be due to the natural ending of a paragraph, or it may be due to the use of <br> tag.

How do I align text vertically in HTML table?

Vertical Alignment The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements). The following example sets the vertical text alignment to bottom for <td> elements:

How do I left-align the content of a table?

To left-align the content, force the alignment of <th> elements to be left-aligned, with the text-align: left property: The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>. By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

Video Answer

4 Answers

You can use css 'display:inline-block' or 'display:inline-grid' and mention width.

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}

p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

p.normal {
    display: inline-grid;
    width: 30%;
    float: left;
    font-size: 11px;
}
<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <p class="normal">Orders Shipped Today: 0</p>
    <p class="normal">Order&nbsp;Received: 14</p>
    <p class="normal">Payment&nbsp;Declined: 6</p>
    <p class="normal">Payment&nbsp;Authorized: 3</p>
    <p class="normal">Mgt&nbsp;Hold: 6</p>
    <p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: 3</p>
    <p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: 4</p>
    <p class="normal">HELP&nbsp;ME: 1</p>
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>
like image 174
Ishita Ray Avatar answered Oct 24 '22 00:10

Ishita Ray

 

            .tiny-ps {
             display: block;
            }

            .big-ps {
              display: none;
            }

            div.summary-container {
              border: 2px ridge;
              width: 100%;
              font-weight: normal;
              background-color: #eaeaea;
            }

            p {
              font-family: Tahoma, Arial, Helvetica;
            }

            p.highlight {
              display: block;
              color: #ffffff;
              font-weight: bold;
              text-align: center;
            }

            p.highlight:nth-of-type(odd) {
              background-color: #800000;
            }

            p.highlight:nth-of-type(even) {
              background-color: #800020;
            }

            @media screen and (min-width: 500px) {
              div.summary-container {
                margin: 10px 0px;
              }
              p {
                font-size: 12pt;
                margin-bottom: 5px;
                margin-top: 5px;
              }
              p.normal {
                display: inline;
                margin-right: 2%;
                font-size: 12pt;
              }
              p.highlight {
                display: block;
                margin: 2px 0px 2px 0px;
                font-size: 12pt;
              }
              .billName {
                display: block;
              }
              .Norm9 {
                font-size: 8pt;
              }
              .tiny-ps {
                display: none;
              }
              .big-ps {
                display: inline-block;
              }
            }
            #num{
                width: 5%;
                text-align:left;
                padding-block:initial;
            }
            #std{
                text-align:left;
            }
            .cent{
                margin-left: auto;
                margin-right: auto;
            }
<div class="summary-container">
            <p class="highlight">Address&nbsp;Correction: 3</p>
            <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
            <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
            <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
            <table class="cent">
                <tr>
                <td id="std"><p class="normal">Orders Shipped Today:</td><td id="num">0</p></td>
                <td id="std"><p class="normal">Order&nbsp;Received: </td><td id="num">14</p></td>
                <td id="std"><p class="normal">Payment&nbsp;Declined: </td><td id="num">6</p></td></tr>
                <tr>
                <td id="std"><p class="normal">Payment&nbsp;Authorized: </td><td id="num">3</p></td>
                <td id="std"><p class="normal">Mgt&nbsp;Hold: </td><td id="num">6</p></td>
                <td id="std"><p class="normal">Order&nbsp;Sent&nbsp;to&nbsp;Shipping: </td><td id="num">3</p></td></tr>
                <tr>
                <td id="std"><p class="normal">Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT: </td><td id="num">4</p></td>
                <td id="std"><p class="normal">HELP&nbsp;ME: </td><td id="num">1</p></td>
                <td id="std"><p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: </td><td id="num">2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p></td></tr>
            </table>
        </div>
like image 38
Dhinesh Avatar answered Oct 24 '22 00:10

Dhinesh

Use CSS's text-indent property.

p {
  text-indent: 45px
}

Adjust the pixel value to whatever fits. You can also use a percentage value for responsive sites.

like image 39
Peter Nielsen Avatar answered Oct 24 '22 00:10

Peter Nielsen

try this

Expedited/Courier Orders Sent to Shipping

you can also put in table

.tiny-ps {
  display: block;
}

.big-ps {
  display: none;
}

div.summary-container {
  border: 2px ridge;
  width: 100%;
  font-weight: normal;
  background-color: #eaeaea;
}

p {
  font-family: Tahoma, Arial, Helvetica;
}
p.highlight {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

p.highlight:nth-of-type(odd) {
  background-color: #800000;
}

p.highlight:nth-of-type(even) {
  background-color: #800020;
}

@media screen and (min-width: 500px) {
  div.summary-container {
    margin: 10px 0px;
  }
  p {
    font-size: 12pt;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  p.normal {
    display: inline;
    margin-right: 2%;
    font-size: 12pt;
  }
  p.highlight {
    display: block;
    margin: 2px 0px 2px 0px;
    font-size: 12pt;
  }
  .billName {
    display: block;
  }
  .Norm9 {
    font-size: 8pt;
  }
  .tiny-ps {
    display: none;
  }
  .big-ps {
    display: inline-block;
  }
}
<div class="summary-container">
    <p class="highlight">Address&nbsp;Correction: 3</p>
    <p class="highlight"><span class="tiny-ps">Exped/Cour NOT Sent-Shipping: 5</span><span class="big-ps">Expedited/Courier Orders NOT Sent to Shipping: 5</span></p>
    <p class="highlight"><span class="big-ps">Pickup Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Pickups Not Sent-Shipping: 1</span></p>
    <p class="highlight"><span class="big-ps">Liner Orders Not Sent to Shipping: 1</span><span class="tiny-ps">Liners Not Sent-Shipping: 1</span></p>
    <table style="width:100%">
  <tr>
    <td>Orders Shipped Today:</td>
    <td>0</td>
    <td>Order&nbsp;Received:</td>
    <td>14</td>
    <td>Payment&nbsp;Declined:</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Payment&nbsp;Authorized:</td>
    <td>3</td>
    <td>Mgt&nbsp;Hold:</td>
    <td>6</td>
    <td>Order&nbsp;Sent&nbsp;to&nbsp;Shipping:</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Pending&nbsp;Mgt&nbsp;Approval&nbsp;for&nbsp;PMT:</td>
    <td>4</td>
    <td>HELP&nbsp;ME: 1</td>
    <td>1</td>
    <td>Payment&nbsp;Declined:</td>
    <td>6</td>
  </tr>
</table>
    
    <p class="normal"><span class="big-ps">Expedited/Courier Orders Sent to Shipping: 2</span><span class="tiny-ps">Exped/Courier Sent to Shipping: 2</span></p>
  </div>
like image 1
Kashif Avatar answered Oct 23 '22 23:10

Kashif
Sign in to Comment

Related questions

Auto scrolling text inside html table
how to get frequency value in javascript?
Place custom icon inside bootstrap button
Padding to CSS Grid
Including npm packages in Vue.js app
How to align-items: center AND align-self: stretch?
Apply blend mode to drop-shadow only
Unexpected Chrome Autofill Behaviour [disable chrome autofill]
Flex items with same height in same row
How to force prettier html formatting to format tags in one line?
Set child width relative to its parents height in pure css
How to stretch a WebGL canvas without blurring? The style "image-rendering" doesn't work
Prevent :hover bubbling [duplicate]
How to create a lazy load treeview in Angular 7
Video is lagging when using currentTime
Vertically align html-entity characters in monospace font?
How do I keep position: relative content from overlapping my position: sticky header?
How can I make A Pipeline Using Border In CSS
How to add a data attribute to Material-UI Button?
What is this CSS property : -internal-light-dark

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!