Question 161034 in CSS Question posted in
Some basic documentation can be found here.

Why isn’t my p full size & my ul’s sqr in place?

article {
  border:4px solid #000;
  width:825px;
  margin:50px auto;
}

#layout {
    display: flex;
    gap: 40px;
 }
.middle {
  flex: 1;
}
.middle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  }
.right {
  flex: 1;
  }
<article>
<!-- flex-container -->
<div id='layout'>

     <!--  left-part  -->
<img src="xx" width="240" height="140" />

     <!--  middle-part -->
<div class="middle">
    <!-- middle-top -->
    <div class="middle-top">
    <p>left text</p>
    <p>right text</p>
    </div>
</div>
    <p>some content</p> 
    <a></a>

<div class="color-selector">
   <a class="color-red"></a>
   <a class="color-green"></a>
   <a class="color-blue"></a>
   <a class="color-yellow"></a>
   <a class="color-brown"></a>
</div>

     <!--  right-part -->
<div class="right">
   <h3>some content</h3>
   <ul>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>

</div>
</article>

Now I have a flex box, there’re left、middle、right three part.
The right part have a ul, the ul list-style:square takes the space of gap
of flex-box.I want to let the square also in the right part, just to the right.

And my p element have 243px width, but from first row begin, it not occupy the whole row , it may just have 200px then just change the row.

There’re not margin or padding above it,
just a flex-box above it, I didn’t know if it effect it.

Can someone help me? Thanks!!

Here’s my complete code and wrong cutpage.

https://codepen.io/xiaobai_xing/pen/xxyYWvo?editors=1100

Tags:

3

Answers


  1. 0

    Please use correct grammar, punctuation, and spelling. You are also required to provide a minimal reproducible example of the relevant code to your question. How can we help you without the relevant information? Please edit your post, and resolve these issues so that community members can help you more effectively.

    Based on the question, as posed, I can only assume the code that you are using based on the provided screenshot. Here is my assumption of what your code may look:

    <!-- html -->

<div id="layout">
    <img src="some_image.jpg" />
    
    <div>
        <h3>$65 <small>FREE SHIPPING</small></h3>
        <p>Some content here</p>
    </div>
    
    <div id="right">
        <h3>PRODUCT DETAILS</h3>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
</div>

    /* css */

#layout {
    display: flex;
    justify-content: space-between;
}

    When writing posts, include images directly in the post. Please don’t attach links to screenshots. Also, include the relevant code.

    The paragraph tag is within an element that is contained inside a flex-box. Everything in that child element will be "grouped" together as one element of the flex-box.

    As for the list: it is being displayed correctly. The bullet point appear before the text value of the list item. Therefore, the bullet points will appear before the container of the li element.

    Login or Signup to reply.
  2. 0

    <p class="top-a"> is occupying all of the space allotted for it inside of the middle container. If you are wanting this text to span all three columns, then you will have to move it outside of the <div class="flex-container"> wrapper.

    Add a margin to position the bullet points into the block:

    li {
  list-style-type: square;
  margin-inline-start: 1em;
 }
    Login or Signup to reply.
  3. 0

    You can try this:

    article {
  border: 4px solid #000;
  width: 825px;
  margin: 50px auto;
}

#layout {
  display: flex;
  gap: 40px;
}

.middle {
  display: block;
}

.middle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.middle-top p:nth-child(2) {
 margin-left: 1vw;
}

.right {
  flex: 1;
}

.right ul {
  list-style-type: none;
  padding: 0;
}

.right ul li::before {
  content: "⏹";
  padding-right: 1vw;
}
    <article>
  <!-- flex-container -->
  <div id='layout'>

    <!--  left-part  -->
    <img src="xx" width="240" height="140" />

    <!--  middle-part -->
    <div class="middle">
      <!-- middle-top -->
      <div class="middle-top">
        <p>left text</p>
        <p>right text</p>
      </div>
    
    <p>some content.</p>
    <a></a>

    <div class="color-selector">
      <a class="color-red"></a>
      <a class="color-green"></a>
      <a class="color-blue"></a>
      <a class="color-yellow"></a>
      <a class="color-brown"></a>
    </div>
    </div>
    <!--  right-part -->
    <div class="right">
      <h3>some content</h3>
      <ul>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
        <li>Lorem ipsum</li>
      </ul>
    </div>

  </div>
</article>

    Changes are:

    1. "some content" was outside the .middle so it is considered as the next element in #layout‘s flexbox. I have included it inside .middle.
    2. .middle having flex:1 caused "some content" to be part of flexbox, so I have removed it and to make "some content" always show below "middle-top", I have set it’s display as block.
    3. As for the .right, to remove all default style, I used list-style-type: none;. But as a result of that, squares are also lost. So to add the squares, I included corresponding Unicode character as content inside a ::before pseudoelement. And I created a small gap with padding-right so that text of the list maintains a gap from the squares.You may remove it if you don’t want that.

    Hope you find this useful! Even if English is not your first language, please try to make the question understandable to others. All the best!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search