主页 / user-554371

Denis's questions

Martin Hope
Denis
Asked: 2023-05-19 00:49:27 +0000 UTC
  • 9

怎么去掉一些地方的边框？在四舍五入的地方，边界有所不同：

在此处输入图像描述

我们还需要扩展第一个元素的上边框：

在此处输入图像描述

.company-items {
  margin: 0 100px;
}

.company-items-container {}

.company-item {
  border-radius: 15px;
  border: 1px solid #C4D0D9;
}

.company-item:nth-child(odd) {
  border-radius: 10px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border: 1px solid #C4D0D9;
  border-right: 0;
}

.company-item:nth-child(even) {
  border-radius: 10px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border: 1px solid #C4D0D9;
  border-left: 0;
}

.company-item-container {
  display: flex;
}

.company-subtitle {
  display: flex;
  align-items: center;
  vertical-align: middle;
  font-family: 'Sreda';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #FFFFFF;
}

.company-icon {
  display: none;
}

.company-text {
  width: 420px;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 27px;
  color: #FFFFFF;
}

.company-text,
.company-subtitle {
  margin: 115px 150px;
}
<div class="company-items">
  <div class="company-items-container">
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-item-container">
        <div class="company-subtitle">
          <h3>Digital Marketing</h3>
        </div>
        <div class="company-icon"><img src="img/icons/1-7dm.svg" alt=""></div>
        <div class="company-text">Lorem ipsum dolor sit amet consectetur. Sem vulputate arcu convallis aliquam diam sagittis tortor. Scelerisque nunc augue ornare pretium egestas at ut nec in. </div>
      </div>
    </div>

  </div>
</div>

css
Martin Hope
Denis
Asked: 2023-05-18 21:13:33 +0000 UTC
  • 6

我无法弄清楚如何在我的情况下使按钮处于同一水平。

我尝试了很多选项，但按钮没有对齐。

在此处输入图像描述

.package-items {
  margin-left: 40px;
  margin-right: 40px;
}

.package-items-container {
  justify-content: center;
}

.row {
  display: flex;
}

.package-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0 20px;
  width: 414px;
  background: #B2C1C1;
  border-radius: 20px;
}

.package-item-container {
  padding: 60px 50px;
}

.package-subtitle {
  font-family: 'Sreda';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  text-align: center;
  color: #4F4F4F;
}

.package-list {
  margin: 60px auto 50px auto;
  width: fit-content;
}

.package-li {
  padding: 5px;
  width: fit-content;
  list-style: inside;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
}

.package-price {
  margin: 0 0 20px 0;
  text-align: center;
  font-family: 'Sreda';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  text-decoration-line: underline;
  color: #646464;
}

.package-btn {
  margin: 0 auto;
}

.package-item:nth-child(2) {
  background: #BAD5D5;
}

.package-item:nth-child(3) {
  background: #9FBFBF;
}

.btn {
  background: #D6F2FE;
  border-radius: 5px;
  height: 50px;
  width: 184px;
  position: relative;
}

.btn a {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 100%;
  font-size: 16px;
  height: 100%;
  color: #333333;
}
<section class="package-section">
  <div class="package-container">
    <div class="package-content">
      <div class="package-items">
        <div class="package-items-container row">
          <div class="package-item">
            <div class="package-item-container">
              <div class="package-subtitle">
                <h3>Small business solutions</h3>
              </div>
              <div class="package-list">
                <ul class="package-ul">
                  <li class="package-li">support of small</li>
                  <li class="package-li">support of small </li>
                  <li class="package-li">support of small </li>
                  <li class="package-li">medium-sized businesses</li>
                </ul>
              </div>
              <div class="package-price">200$</div>
              <div class="package-btn btn"><a href="#">Choose</a></div>
            </div>
          </div>
          <div class="package-item">
            <div class="package-item-container">
              <div class="package-subtitle">
                <h3>Digital coordination</h3>
              </div>
              <div class="package-list">
                <ul class="package-ul">
                  <li class="package-li">consultancy for a business</li>
                  <li class="package-li">consultancy for a business </li>
                  <li class="package-li">consultancy for a business </li>
                  <li class="package-li">consultancy for a business</li>
                  <li class="package-li">consultancy for a business</li>
                  <li class="package-li">consultancy for a business </li>
                  <li class="package-li">consultancy for a business </li>
                  <li class="package-li">consultancy for a business</li>
                </ul>
              </div>
              <div class="package-price">500$</div>
              <div class="package-btn btn"><a href="#">Choose</a></div>
            </div>
          </div>
          <div class="package-item">
            <div class="package-item-container">
              <div class="package-subtitle">
                <h3>Business cooperation</h3>
              </div>
              <div class="package-list">
                <ul class="package-ul">
                  <li class="package-li">complex solutions</li>
                  <li class="package-li">building individual promotion systems</li>
                  <li class="package-li">a personal manager who leads the project</li>
                </ul>
              </div>
              <div class="package-price">1000$</div>
              <div class="package-btn btn"><a href="#">Choose</a></div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
  </div>
</section>

css