Home > Software design >  align two columns on a review page
align two columns on a review page

Time：02-01

I make a review page that has 5 stars, just to the left of each is text. I want to align each column evenly so that the stars are in align as well as the text in line. Here is an image and as you can see there are all un even, is there an easier way to align them ? I tried manually lining them up by either added padding to the left or right, some of the text on the left hand side is longer than other so it makes it a messy formula. If anyone has any idea that would be very helpful.

Thank you in advance.

enter image description here

.flex {
  display: flex;
  margin: auto 0;
  justify-content: center;
}

{
  margin: 0;
  padding: 0;
}

.rate {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

.flex {
  display: flex;
  margin: auto 0;
  justify-content: center;
}

{
  margin: 0;
  padding: 0;
}

.rate1 {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate1:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate1:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate1:not(:checked)>label:before {
  content: '★ ';
}

.rate1>input:checked~label {
  color: #ffc700;
}

.rate1:not(:checked)>label:hover,
.rate1:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate1>input:checked label:hover,
.rate1>input:checked label:hover~label,
.rate1>input:checked~label:hover,
.rate1>input:checked~label:hover~label,
.rate1>label:hover~input:checked~label {
  color: #c59b08;
}

{
  margin: 0;
  padding: 0;
}

.rate2 {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate2:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate2:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate2:not(:checked)>label:before {
  content: '★ ';
}

.rate2>input:checked~label {
  color: #ffc700;
}

.rate2:not(:checked)>label:hover,
.rate2:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate2>input:checked label:hover,
.rate2>input:checked label:hover~label,
.rate2>input:checked~label:hover,
.rate2>input:checked~label:hover~label,
.rate2>label:hover~input:checked~label {
  color: #c59b08;
}

{
  margin: 0;
  padding: 0;
}

.rate3 {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate3:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate3:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate3:not(:checked)>label:before {
  content: '★ ';
}

.rate3>input:checked~label {
  color: #ffc700;
}

.rate3:not(:checked)>label:hover,
.rate3:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate3>input:checked label:hover,
.rate3>input:checked label:hover~label,
.rate3>input:checked~label:hover,
.rate3>input:checked~label:hover~label,
.rate3>label:hover~input:checked~label {
  color: #c59b08;
}

{
  margin: 0;
  padding: 0;
}

.rate4 {
  float: left;
  height: 46px;
  padding: 0 10px;
}

.rate4:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate4:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate4:not(:checked)>label:before {
  content: '★ ';
}

.rate4>input:checked~label {
  color: #ffc700;
}

.rate4:not(:checked)>label:hover,
.rate4:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate4>input:checked label:hover,
.rate4>input:checked label:hover~label,
.rate4>input:checked~label:hover,
.rate4>input:checked~label:hover~label,
.rate4>label:hover~input:checked~label {
  color: #c59b08;
}
<link rel="stylesheet" type="text/css" href="style.css">
<title>Star rating using pure CSS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<body style="background-color:#FFFFFF;">

  <br><br>
  <center>
    <h1 style="font-family: " Montserrat ", -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, "Helvetica Neue ",
        Arial, "Noto Sans ", sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ", "Noto Color Emoji "">Please rank us below</h1>
  </center>
  <br><br><br>
  <div >
    <p id="paragraph" style="color: #0d0d0d; font-weight: bold; font-size: 20px; font-family: " Lato ", Arial,
        sans-serif;">Results</p>
    <div  style="padding-left: 365px">
      <input type="radio" id="star5" name="rate" value="5" />
      <label for="star5" title="text">5 stars</label>
      <input type="radio" id="star4" name="rate" value="4" />
      <label for="star4" title="text">4 stars</label>
      <input type="radio" id="star3" name="rate" value="3" />
      <label for="star3" title="text">3 stars</label>
      <input type="radio" id="star2" name="rate" value="2" />
      <label for="star2" title="text">2 stars</label>
      <input type="radio" id="star1" name="rate" value="1" />
      <label for="star1" title="text">1 star</label>
    </div>
  </div>
  <div >
    <p id="paragraph" style="color: #0d0d0d; font-weight: bold; font-size: 20px; font-family: " Lato ", Arial,
        sans-serif;">Communication</p>
    <div  style="padding-left: 300px">
      <input type="radio" id="star10" name="rate1" value="5" />
      <label for="star10" title="text">5 stars</label>
      <input type="radio" id="star9" name="rate1" value="4" />
      <label for="star9" title="text">4 stars</label>
      <input type="radio" id="star8" name="rate1" value="3" />
      <label for="star8" title="text">3 stars</label>
      <input type="radio" id="star7" name="rate1" value="2" />
      <label for="star7" title="text">2 stars</label>
      <input type="radio" id="star6" name="rate1" value="1" />
      <label for="star6" title="text">1 star</label>
    </div>
  </div>
  <div >
    <p id="paragraph" style="color: #0d0d0d; padding-right: 65px; font-weight: bold;  font-size: 20px; font-family: " Lato ", Arial, sans-serif;">Website</p>
    <div  style="padding-left: 305px">
      <input type="radio" id="star15" name="rate2" value="5" />
      <label for="star15" title="text">5 stars</label>
      <input type="radio" id="star14" name="rate2" value="4" />
      <label for="star14" title="text">4 stars</label>
      <input type="radio" id="star13" name="rate2" value="3" />
      <label for="star13" title="text">3 stars</label>
      <input type="radio" id="star12" name="rate2" value="2" />
      <label for="star12" title="text">2 stars</label>
      <input type="radio" id="star11" name="rate2" value="1" />
      <label for="star11" title="text">1 star</label>
    </div>
  </div>
  <div >
    <p id="paragraph" style="color: #0d0d0d; font-weight: bold; font-size: 20px; padding-right: 10px; font-family: " Lato ", Arial, sans-serif;">Response Time</p>
    <div  style="padding-left: 305px">
      <input type="radio" id="star20" name="rate3" value="5" />
      <label for="star20" title="text">5 stars</label>
      <input type="radio" id="star19" name="rate3" value="4" />
      <label for="star19" title="text">4 stars</label>
      <input type="radio" id="star18" name="rate3" value="3" />
      <label for="star18" title="text">3 stars</label>
      <input type="radio" id="star17" name="rate3" value="2" />
      <label for="star17" title="text">2 stars</label>
      <input type="radio" id="star16" name="rate3" value="1" />
      <label for="star16" title="text">1 star</label>
    </div>
  </div>
  <div >
    <p id="paragraph" style="color: #0d0d0d; font-weight: bold; font-size: 20px; padding-left: 200px font-family: " Lato ", Arial, sans-serif;">Customer Service</p>
    <div  style="padding-left: 300px">
      <input type="radio" id="star25" name="rate4" value="5" />
      <label for="star25" title="text">5 stars</label>
      <input type="radio" id="star24" name="rate4" value="4" />
      <label for="star24" title="text">4 stars</label>
      <input type="radio" id="star23" name="rate4" value="3" />
      <label for="star23" title="text">3 stars</label>
      <input type="radio" id="star22" name="rate4" value="2" />
      <label for="star22" title="text">2 stars</label>
      <input type="radio" id="star21" name="rate4" value="1" />
      <label for="star21" title="text">1 star</label>
    </div>
  </div>

  <center>
    <div >
      <label for="exampleFormControlTextarea1">Comments</label>
      <textarea  style="width: 30%" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
  </center>

</body>

CodePudding user response：

Use flexbox for the alignment rather than trying to calculate a specific padding to line the sections up:

h1 {
  font-family: " Montserrat ", -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, "Helvetica Neue ", Arial, "Noto Sans ", sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ", "Noto Color Emoji";
  text-align: center;
}

p {
  color: #0d0d0d;
  font-weight: bold;
  font-size: 20px;
  font-family: " Lato ", Arial, ans-serif;
}

.flex {
  display: flex;
  width: 90vw;
  margin: 0 auto;
  justify-content: space-between
}

.rate {
  position: relative;
  height: 46px;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}
<link rel="stylesheet" type="text/css" href="style.css">
<title>Star rating using pure CSS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<h1>Please rank us below</h1>

<div >
  <p>Results</p>
  <div >
    <input type="radio" id="star5" name="rate" value="5" />
    <label for="star5" title="text">5 stars</label>
    <input type="radio" id="star4" name="rate" value="4" />
    <label for="star4" title="text">4 stars</label>
    <input type="radio" id="star3" name="rate" value="3" />
    <label for="star3" title="text">3 stars</label>
    <input type="radio" id="star2" name="rate" value="2" />
    <label for="star2" title="text">2 stars</label>
    <input type="radio" id="star1" name="rate" value="1" />
    <label for="star1" title="text">1 star</label>
  </div>
</div>
<div >
  <p>Communication</p>
  <div >
    <input type="radio" id="star10" name="rate1" value="5" />
    <label for="star10" title="text">5 stars</label>
    <input type="radio" id="star9" name="rate1" value="4" />
    <label for="star9" title="text">4 stars</label>
    <input type="radio" id="star8" name="rate1" value="3" />
    <label for="star8" title="text">3 stars</label>
    <input type="radio" id="star7" name="rate1" value="2" />
    <label for="star7" title="text">2 stars</label>
    <input type="radio" id="star6" name="rate1" value="1" />
    <label for="star6" title="text">1 star</label>
  </div>
</div>
<div >
  <p>Website</p>
  <div >
    <input type="radio" id="star15" name="rate2" value="5" />
    <label for="star15" title="text">5 stars</label>
    <input type="radio" id="star14" name="rate2" value="4" />
    <label for="star14" title="text">4 stars</label>
    <input type="radio" id="star13" name="rate2" value="3" />
    <label for="star13" title="text">3 stars</label>
    <input type="radio" id="star12" name="rate2" value="2" />
    <label for="star12" title="text">2 stars</label>
    <input type="radio" id="star11" name="rate2" value="1" />
    <label for="star11" title="text">1 star</label>
  </div>
</div>
<div >
  <p>Response Time</p>
  <div >
    <input type="radio" id="star20" name="rate3" value="5" />
    <label for="star20" title="text">5 stars</label>
    <input type="radio" id="star19" name="rate3" value="4" />
    <label for="star19" title="text">4 stars</label>
    <input type="radio" id="star18" name="rate3" value="3" />
    <label for="star18" title="text">3 stars</label>
    <input type="radio" id="star17" name="rate3" value="2" />
    <label for="star17" title="text">2 stars</label>
    <input type="radio" id="star16" name="rate3" value="1" />
    <label for="star16" title="text">1 star</label>
  </div>
</div>
<div >
  <p>Customer Service</p>
  <div >
    <input type="radio" id="star25" name="rate4" value="5" />
    <label for="star25" title="text">5 stars</label>
    <input type="radio" id="star24" name="rate4" value="4" />
    <label for="star24" title="text">4 stars</label>
    <input type="radio" id="star23" name="rate4" value="3" />
    <label for="star23" title="text">3 stars</label>
    <input type="radio" id="star22" name="rate4" value="2" />
    <label for="star22" title="text">2 stars</label>
    <input type="radio" id="star21" name="rate4" value="1" />
    <label for="star21" title="text">1 star</label>
  </div>
</div>

CodePudding user response：

You have a lot of logical and practical problems up there.

  • IDs must be unique, otherwise they don't identify anything. This is an HTML spec requirement.
  • Repeating style blocks for each element would be a dev and maintenance nightmare. Classes are sets of like things. Combine them.
  • Inline styles are even worse. Why would you have a stylesheet, then crud up your markup with separate styling?
  • Why are all your semicolons dropped? A good editor (or the Stack Snippet editor) will auto-format for you and clean all that up.
  • The center element is deprecated. Don't use it. In your case, Bootstrap provides text alignment classes anyway, along with flex alignment classes.
  • Don't use line breaks for spacing. That's a misuse. Use margin or padding instead (or flex layout). Bootstrap has some nice spacing utilities.
  • Style blocks with no selector don't do anything.
  • Don't direct users to somewhere with words like "below". That's just clutter. Instead, make your UI intuitive.

Here's all that cleaned up, with some Bootstrap flex utility classes applied for layout. I don't exactly know what layout you're looking for, so feel free to comment.

body {
  background-color: #FFFFFF;
}

h1 {
  font-family: " Montserrat ", -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, "Helvetica Neue ", Arial, "Noto Sans ", sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ", "Noto Color Emoji";
}

p {
  color: #0d0d0d;
  font-weight: bold;
  font-size: 20px;
  font-family: " Lato ", Arial, sans-serif;
  margin-bottom: 0 !important;
}

.rate {
  height: 46px;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 30px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #ffc700;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #deb217;
}

.rate>input:checked label:hover,
.rate>input:checked label:hover~label,
.rate>input:checked~label:hover,
.rate>input:checked~label:hover~label,
.rate>label:hover~input:checked~label {
  color: #c59b08;
}

#exampleFormControlTextarea1 {
  width: 30%;
}
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <h1 >Please rate us!</h1>

  <div >
    <p>Results</p>

    <div >
      <input type="radio" id="star5a" name="rate" value="5" />
      <label for="star5a" title="text">5 stars</label>
      <input type="radio" id="star4a" name="rate" value="4" />
      <label for="star4a" title="text">4 stars</label>
      <input type="radio" id="star3a" name="rate" value="3" />
      <label for="star3a" title="text">3 stars</label>
      <input type="radio" id="star2a" name="rate" value="2" />
      <label for="star2a" title="text">2 stars</label>
      <input type="radio" id="star1a" name="rate" value="1" />
      <label for="star1a" title="text">1 star</label>
    </div>
  </div>

  <div >
    <p>Communication</p>

    <div >
      <input type="radio" id="star5b" name="rate" value="5" />
      <label for="star5b" title="text">5 stars</label>
      <input type="radio" id="star4b" name="rate" value="4" />
      <label for="star4b" title="text">4 stars</label>
      <input type="radio" id="star3b" name="rate" value="3" />
      <label for="star3b" title="text">3 stars</label>
      <input type="radio" id="star2b" name="rate" value="2" />
      <label for="star2b" title="text">2 stars</label>
      <input type="radio" id="star1b" name="rate" value="1" />
      <label for="star1b" title="text">1 star</label>
    </div>
  </div>

  <div >
    <p>Website</p>

    <div >
      <input type="radio" id="star5c" name="rate" value="5" />
      <label for="star5c" title="text">5 stars</label>
      <input type="radio" id="star4c" name="rate" value="4" />
      <label for="star4c" title="text">4 stars</label>
      <input type="radio" id="star3c" name="rate" value="3" />
      <label for="star3c" title="text">3 stars</label>
      <input type="radio" id="star2c" name="rate" value="2" />
      <label for="star2c" title="text">2 stars</label>
      <input type="radio" id="star1c" name="rate" value="1" />
      <label for="star1c" title="text">1 star</label>
    </div>
  </div>

  <div >
    <label for="exampleFormControlTextarea1" >Comments</label>
    <textarea  id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</body>

Page link：https//www.codepudding.com/Softwaredesign/283285.html

Prev:text-overflow: ellipsis: doesn't work when we have multiple levels of html elements in a div
Next:I can't see the number of rows in the table correctly
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding