小提琴我有一個圖表，我的目標是將旋轉木馬左、右始終垂直居中（距離頂部 50%），并將兩個箭頭放置在距離圖表約 5% 的位置，但足夠接近圖表。我很難讓它發揮作用。我試過了超文本標記語言<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如果您可以通過查看我的 HTML 和 CSS 發現我的問題，請說出來。
1 回答
千萬里不及你
TA貢獻1784條經驗 獲得超9個贊
我注意到一些事情，你的代碼筆是只讀的，所以我把它移到了一支新筆上：
您的 @media 樣式未包含在內
{}，因此未應用這些樣式。您試圖移動
.fa-chevrons，但它們是span元素，而邊距不起作用。
這是您擁有的完整代碼 - 沒有基本 CSS，因為堆棧片段有字符限制。我的 codepen 鏈接包含所有內容。
<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>
您會看到我在圖表周圍添加了一些填充，以顯示箭頭將如何設置在圖表旁邊。
最重要的是更改 V 形以阻止元素并將它們移動到50%其高度（向上 15 像素）。
https://codepen.io/chrislafrombois/pen/RwPqdxj
希望這可以幫助您朝著正確的方向前進。如果錯過了您想要做的事情，請告訴我。
- 1 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消