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

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

即使在放大/縮小或更新瀏覽器窗口大小后,如何使輪播箭頭保持在中心?

即使在放大/縮小或更新瀏覽器窗口大小后,如何使輪播箭頭保持在中心?

至尊寶的傳說(shuō) 2023-10-16 10:28:34
小提琴我有一個(gè)圖表,我的目標(biāo)是將旋轉(zhuǎn)木馬左、右始終垂直居中(距離頂部 50%),并將兩個(gè)箭頭放置在距離圖表約 5% 的位置,但足夠接近圖表。我很難讓它發(fā)揮作用。我試過(guò)了超文本標(biāo)記語(yǔ)言<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">    <div class="panel panel-filled">        <div class="panel-body carousel">            <h1>Network Bandwidth</h1>            <div id="chart1Carousel" class="carousel slide" data-ride="carousel">                <!-- Wrapper for slides -->                <div class="carousel-inner">                    <div class="item active"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>                        <small class="lastSelectedMenu">                            <span> Current Interval:                                <span class="lastSelected" style="color: rgb(255, 235, 59);">day (3/25/2020)</span>                            </span>                            <select name="last" class="float-right">                                <option id="default" value="default">Select Interval</option>                                <option value="day">Day</option>                                <option value="week">Week</option>                                <option value="month">Month</option>                                <option value="year">Year</option>                            </select>                        </small>                        <canvas width="558" height="279" id="chart1" style="display: block; width: 558px; height: 279px;" class="chartjs-render-monitor"></canvas>                    </div>                </div>https://codepen.io/sn4k3eye/project/editor/Akyrky如果您可以通過(guò)查看我的 HTML 和 CSS 發(fā)現(xiàn)我的問(wèn)題,請(qǐng)說(shuō)出來(lái)。
查看完整描述

1 回答

?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

我注意到一些事情,你的代碼筆是只讀的,所以我把它移到了一支新筆上:

  1. 您的 @media 樣式未包含在內(nèi){},因此未應(yīng)用這些樣式。

  2. 您試圖移動(dòng).fa-chevrons,但它們是span元素,而邊距不起作用。

這是您擁有的完整代碼 - 沒(méi)有基本 CSS,因?yàn)槎褩F斡凶址拗?。我?codepen 鏈接包含所有內(nèi)容。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.4.1/cerulean/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<style>

  

    .item img {

      width: 100%;

      height: auto;

    }

    .carousel {

      padding-left: 45px;

      padding-right: 45px;

    }

    .carousel-control .fa-chevron-left,

    .carousel-control .fa-chevron-right {

      position: absolute;

      width: 30px;

      height: 30px;

      font-size: 30px;

      top: 50%;

      display: block;

      transform: translate(0, -50%;

      )

    }

    .carousel-control.right {

      right: 0;

      left: auto;

    }

    .carousel-control .fa-chevron-left {}

    .carousel-control .fa-chevron-right {}

    .carousel {

      position: relative;

    }

    .carousel-inner {

      position: relative;

      width: 100%;

      overflow: hidden;

    }

    .carousel-control.left,

    .carousel-control.right {

      background: none;

    }

    .carousel-control {

      position: absolute;

      top: 0;

      bottom: 0;

      left: 0;

      width: 30px;

      font-size: 20px;

      color: #fff;

      text-align: center;

      text-shadow: 0 1px 2px rgba(0, 0, 0, .6);

      background-color: rgba(0, 0, 0, 0);

      filter: alpha(opacity=50);

      opacity: .5;

    }

  

</style>


<div class="col-xs-4">

  <div class="panel panel-filled">

    <div class="panel-body carousel">

      <h1>Carousel Issue</h1>

      <div id="chart1Carousel" class="carousel slide" data-ride="carousel">

        <div class="carousel-inner">

          <div class="item active">

            <div class="chartjs-size-monitor">

              <div class="chartjs-size-monitor-expand">

                <div class=""></div>

              </div>

              <div class="chartjs-size-monitor-shrink">

                <div class=""></div>

              </div>

            </div>


            <img src="https://i.imgur.com/ltw5Pac.png" width="558" height="279">



          </div>

        </div>

      </div>



      <!-- Left and right controls -->

      <a class="left carousel-control" href="#chart1Carousel" data-slide="prev">

        <span class="fa fa-chevron-left"></span>

        <span class="sr-only">Previous</span>

      </a>

      <a class="right carousel-control" href="#chart1Carousel" data-slide="next" style="display: block;">

        <span class="fa fa-chevron-right"></span>

        <span class="sr-only">Next</span>

      </a>



    </div>

  </div>

</div>

您會(huì)看到我在圖表周圍添加了一些填充,以顯示箭頭將如何設(shè)置在圖表旁邊。

最重要的是更改 V 形以阻止元素并將它們移動(dòng)到50%其高度(向上 15 像素)。

https://codepen.io/chrislafrombois/pen/RwPqdxj

希望這可以幫助您朝著正確的方向前進(jìn)。如果錯(cuò)過(guò)了您想要做的事情,請(qǐng)告訴我。



查看完整回答
反對(duì) 回復(fù) 2023-10-16
  • 1 回答
  • 0 關(guān)注
  • 129 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)