這是我的第一個stackoverflow問題,請耐心等待。如何使用jQuery或SCSS動態調整元素寬度
問題是,每次瀏覽器被調整大小時,圖像都會在文本上溢出。
如何修復虛線元素以提高響應度而不是手動添加一些媒體查詢?謝謝!
.romanweek-tablewrapper {
border: 2px solid #000;
padding: 20px 30px;
margin: 40px auto;
display: table;
width: 85%;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist {
display: table;
width: 85%;
margin: 0 auto;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 {
font: 400 16px Lato;
width: 100%;
display: inline-block;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule {
text-transform: uppercase;
position: relative;
float: left;
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
content: '';
position: absolute;
border: 1px dashed rgba(0, 0, 0, 0.5);
bottom: 5px;
width: 95px;
left: 7em;
transition: 1s all ease;
}
@media screen and (max-width: 1850px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 75px;
}
}
@media screen and (max-width: 1700px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 65px;
}
}
@media screen and (max-width: 1600px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 55px;
left: 6em;
}
}
@media screen and (max-width: 1400px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 35px;
}
}
@media screen and (max-width: 1300px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 25px;
}
}
@media screen and (max-width: 1200px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 15px;
}
}
@media screen and (max-width: 1100px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 0;
}
}
@media screen and (max-width: 991px) {
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-schedule::after {
width: 250px;
}
}
.romanweek-tablewrapper .menu-list-wrapper .romanweek-menulist li h4 .menu-item-description {
float: right;
text-align: left;
width: 40%;
}
<div class="romanweek-tablewrapper">
<div class="table-header-wrapper">
<h1 class="text-blue section-heading">Roman Week</h1>
</div>
<div class="menu-list-wrapper">
<ul class="romanweek-menulist">
<li>
<h4 class="menu-item"><span class="menu-schedule">Lunedi</span><span class="menu-item-description">We're closed<br> - You're cooking.</span></h4></li>
<li>
<h4 class="menu-item"><span class="menu-schedule">Martedi</span><span class="menu-item-description">Fettuccine</span></h4></li>
<li>
<h4 class="menu-item"><span class="menu-schedule">Mercoledi</span><span class="menu-item-description">Coniglio</span></h4></li>
<li>
<h4 class="menu-item"><span class="menu-schedule">Geovedi</span><span class="menu-item-description">Gnocchi</span></h4></li>
<li>
<h4 class="menu-item"><span class="menu-schedule">Venerdi</span><span class="menu-item-description">Baccala</span></h4></li>
<li>
<h4 class="menu-item"><span class="menu-schedule">Sabato</span><span class="menu-item-description">Vitello</span></h4></li>
<li>
<h4 class="menu-item"><span class="menu-schedule">Domenica</span><span class="menu-item-description">Lasagna</span></h4></li>
</ul>
</div>
</div>
這裏是元素的高度 http://prntscr.com/gkwbcm
代碼筆或類似的東西將是非常有益的。 – rjustin
而不是使用px使用%作爲寬度,所以您的寬度將與屏幕大小有關。 – Ashish451
這裏是一個示例codepen https://codepen.io/erishv/pen/JroJXQ 虛線元素是我想修復/使響應 –