第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在按鈕內(nèi)居中對齊“:after plus/minus sign”

在按鈕內(nèi)居中對齊“:after plus/minus sign”

精慕HU 2022-11-27 17:27:57
我使用的是一個由按鈕組成的手風琴，我有'加號'和'減號'作為'：之后'到目前為止，我已經(jīng)在按鈕中嘗試了“justify-content: center”，我也嘗試過“vertical-align: middle”，但都沒有任何效果，當我試圖在按鈕周圍包裹一個 div 來實現(xiàn)樣式時那個按鈕，它停止了手風琴的工作。在薄屏幕上，當加號進入文本時，我也遇到了麻煩，它目前向右浮動，但它們之間沒有指定的空間來停止交叉。我試圖用來集中對齊這個元素的所有代碼我都沒有工作，請看下面：這是代碼：]HTML:      <button class="accordion">Where is your company located?</button><div class="panel"><p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p></div>    <button class="accordion">What is the warranty and return policy?</button><div class="panel"><p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p></div>    <button class="accordion">Does the product have a specific method of operation? Is it easy to use?</button><div class="panel"><p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p></div>
查看完整描述

2 回答

?
慕村9548890

TA貢獻1884條經(jīng)驗 獲得超4個贊

也許這可以幫助你。我添加了一個<span>due 來控制兩個部分然后display: flex;


var acc = document.getElementsByClassName("accordion");

var i;


for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {

    this.classList.toggle("active");

    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {

      panel.style.maxHeight = null;

    } else {

      panel.style.maxHeight = panel.scrollHeight + "px";

    }

  });

}

.accordion {

  background-color: red;

  color: #444;

  cursor: pointer;

  width: 100%;

  text-align: left;

  outline: none;

  transition: 0.4s;

  color: #262626;

  font-size: 18px;

  font-weight: 700;

  font-style: normal;

  font-family: 'Lato';

  border: 0;

margin: 0;

display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px;

}


/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */

.active, .accordion:hover {

  background-color: white;

}


/* Style the accordion panel. Note: hidden by default */

.panel {

  padding: 0 18px;

  background-color: white;

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.2s ease-out;

}



.accordion span:after {

  content: '\02795'; /* Unicode character for "plus" sign (+) */

  font-size: 18px;

  font-family: 'Lato';

  color: #262626;

  padding-left: 20px;

}


.accordion.active span:after {

  content: "\2796"; /* Unicode character for "minus" sign (-) */

}

      <button class="accordion">Where is your company located? <span></span></button>

<div class="panel">

<p class="zpa-regular2">We are located in the heart of San Francisco, California USA! We do have shipping warehouses located in the USA, Europe, and Asia to ensure the quickest delivery for your location.</p>

</div>

  

  <button class="accordion">What is the warranty and return policy?<span></span></button>

<div class="panel">

<p class="zpa-regular2"><span>We have a Risk-Free Policy. During this promotion - you can try the product for 30 days - if you decide for whatever reason this is not for you then you can return the device for a full refund.</span></p>

</div>

  

  <button class="accordion">Does the product have a specific method of operation? Is it easy to use?<span></span></button>

<div class="panel">

<p class="zpa-regular2">Yes! It is very simple and easy to use. You will receive a detailed user manual with positions and pointers to maximize your results. :)</p>

</div>


查看完整回答
反對 回復 2022-11-27
?
慕哥9229398

TA貢獻1877條經(jīng)驗 獲得超6個贊

這個答案是基于相關 css 屬性的實際行為來實現(xiàn)減號和加號在按鈕內(nèi)的垂直對齊（我沒有嘗試過其他元素，如 span 或 div，但我相信它的工作原理是一樣的，如果不是請原諒我的猜測) 增加字體大?。ㄔ谌魏纬潭壬希?，而不管使用的字體系列。


將此視為 Alberto Rhuetras 已經(jīng)回答的替代方案。


用例：有時你想要更大的按鈕，里面有加號或減號。但是字體大小對于按鈕來說太小了。當您增加按鈕的字體大小時，加號和減號無法像我一樣垂直對齊。那是我想出以下解決方案的時候。


注意：我在其他任何地方都找不到解決方案，所以我最終找到了這個解決方案。我愿意接受任何關于解決方案的說法，所以請隨時發(fā)表一些評論:)


/* common style */

.minus, .plus {

   height: 50px;

   width: 200px;

   background: #216AFF;

   color: white;

}


.minus {

  font-size: 70px;

  display: flex;

  justify-content: center;

  line-height: 35px;

}


.plus {

  font-size: 50px;

  display: flex;

  justify-content: center;

  line-height: 45px;

}


.demo {

  font-size: 18px;

  padding: 18px;

  width: 100%;

  text-align: left;

  display: flex;

}


.demo::after {

  content: "\02795";

  font-size: 18px;

  float: right;

  line-height: 23px;

  justify-content: center;

  align-content: flex-start;

}

<button class="minus">-</button>

<br>

<button class="plus">+</button>

<br>

<button class="demo">Does the product have a specific method of operation? Is it easy to use? What is the warranty and return policy?</button>

在按鈕上使用 display-flex 并使用 line-height 的值在按鈕內(nèi)垂直放置加號或減號。行高值的增加會使符號向下移動，而行高值的減小會使符號向上移動。謝謝！


查看完整回答
反對 回復 2022-11-27
  • 2 回答
  • 0 關注
  • 114 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號