«css» etiketlenmiş sorular

Örneğin, bende: <pre> sun<br/>     mercury <br/>     venus <br/>         earth <br/>         mars <br/>             jupiter <br/>     saturn <br/> </pre> Kod snippet'ini çalıştırSonuçları gizleSnippet'i genişlet ve bu: <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> <br/> <div style="text-indent: 12ch">jupiter</div> <br/> …

19 html  css  acid3 

Ben bir görüntü ve metin yukarıda ve altında bir menü sistemi oluşturmaya çalışıyorum. Veriler dinamiktir. Menü sisteminin, her bir görüntünün birbirinden eşit mesafede olması ve böylece hem yatay hem de dikey bir görüntü ızgarasında sıralanması için görünmesini istiyorum. Sorun metindir. Metin görüntüden daha uzunsa, div büyütülür. Ancak, görüntüler artık birbirleriyle …

17 html  css  flexbox 

Birlikte, bir liste var overflow-xve overflow-yset için auto. Buna ek olarak, momentum kaydırma ayarladım, bu yüzden dokunmatik kaydırma mobilde güzel çalışıyor webkit-overflow-scrolling: true. Ancak sorun, dikey kaydırırken yatay kaydırmanın nasıl devre dışı bırakılacağını anlayamıyorum. Sol üst veya sağ üst tarafa doğru kaydırmak tablonun çapraz olarak kaymasına neden olacağından, gerçekten kötü …

17 javascript  html  css  angular  ionic-framework 

CSS ile noktalı bir daire yapmak istedim ve aşağıdaki işlemle oluşturdum. Kesikli daire bu işlemle görüntülenebilse de, kesikli çizginin sonu ile başlangıcı arasındaki boşluk daraldı ve boşluk eşit değildi. .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> Kod snippet'ini çalıştırSonuçları gizleSnippet'i genişlet Boşluğu …

16 javascript  html  css 

Numaraları olan bir tablo var. Tablodaki bir hücreye tıkladığımda, etkin durumu değiştirir. Bir hücre seçmek ve crtl tuşuna basıp başka bir hücre seçmek istiyorum ve ilk ve ikinci arasındaki sonuç hücreleri aktif hale gelecek. Nasıl uygulanır? codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> …

16 javascript  html  css 

Material-ui'yeMyStyledButton dayalı özel bir düğme ( ) yazdım . Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = …

16 javascript  css  reactjs  jestjs  enzyme 

CSS ile bir roller coaster tarzı animasyon oluşturmaya çalışıyorum. Döngü aşamasında "bardak altlığı" nasıl eğri bilmek istiyorum. Tamamen bir CSS çözümü arıyorum, ancak biraz JavaScript'e ihtiyaç duyuyorsanız, bununla sorunum yok. şimdiye kadar benim kod: #container { width: 200px; height: 300px; margin-top: 50px; position: relative; animation: 10s infinite loop; animation-timing-function: linear; …

15 html  css  css-animations  css-transforms 

<main>Öğeyi doğrudan öğenin altına yerleştirmeye çalışıyorum aşağıdaki snippet (tam ekran modunda görüntülemek gerekir) var <header>. Ben <header>bunu içinde içerik yoluyla kullanıcı kaydırma ekranın üst kısmındaki almak istemeleridir sabit pozisyonda <main>eleman. Bildiğim her şeyi denedim, ancak gelebileceğim en iyi şey, <header>öğenin <main>içeriğinin büyük bir kısmını kesen öğenin üzerine yerleştirilmesidir . Ortaya …

15 html  css  css-position  fixed 

En boy oranını varsaymadan iframe'i nasıl duyarlı hale getirebilirim? Örneğin, içeriğin oluşturulmadan önce bilinmeyen herhangi bir genişliği veya yüksekliği olabilir. Not: Javascript kullanabilirsiniz. Misal: <div id="iframe-container"> <iframe/> </div> Boyut Bu iframe-containeryüzden o zorlukla uygun içinde fazladan boşluk bırakmadan, diğer bir deyişle, kaydırma yapmadan gösterilebilir böylece içerik için yeterli alan, ancak …

14 javascript  html  css  iframe  responsive-design 

Son sayıyı yazdığımda , ilk sayı içeri girer text-box(kaybolur), fazladan bir boşluk ekler. Dışına tıkladıktan sonra text-boxson karakteri yazarken ihtiyacım olan iyi görünüyor. #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: …

14 javascript  jquery  html  css 

HTML tablo üzerinde çalışıyorum ve html-to-papervue.js kullanarak yazıcıya bu tablo yazdırıyorum, Yaptığım şey yeni bir satır oluşturma eklemek tıklayın ve daha sonra baskı tıklayın ben masaya yazdırmaya çalışıyorum ama almıyor yalnızca boş hücreleri gösteren veriler Kod Uygulama.vue <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered …

14 javascript  css  vue.js  printing  vuejs2 

Chrome Tarayıcı otomatik doldurma etkisini kaldırılmış background-colorve background-imagegelen Usernameve Passwordgiriş alanlar. Otomatik tamamlamadan önce Otomatik tamamlamadan sonra Ancak Chrome Tarayıcı otomatik tamamlama, simgelerimi girişlerden gizler ve ayrıca değiştirdi background-color. Yani benim simgeleri olduğu gibi girişlerde kalmak gerekir. Chrome Tarayıcı'nın alanların arka plan rengini değiştirmesini ve görüntüleri gizlemesini durdurmak mümkün mü? …

13 javascript  html  css  google-chrome 

Aşağıdaki örnekte, etikete tıkladığınızda giriş durumu değişir. document.querySelector("label").addEventListener("click", function() { console.log("clicked label"); }); label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } <input type="checkbox" id="1"> <label for="1">Label</label> Kod snippet'ini çalıştırSonuçları gizleSnippet'i genişlet Chrome'da, imleci mousedownve mouseupetkinlikleri arasında hareket ettirdiğinizde giriş yine de tetiklenirken, Firefox'ta onay kutusu durumu değişmez. …

13 javascript  html  css  label 

Sorun gibi bazı harfler gibi görünüyor g, y, qyamaçları aşağı doğru dikey merkezleme için izin vermez bir kuyruk var, vb. İşte sorunu sergilemek için bir resim . Yeşil kutudaki karakterler, aşağı doğru kuyrukları olmadığı için temelde mükemmeldir. Kırmızı kutudakiler sorunu göstermektedir. Tüm karakterlerin mükemmel bir şekilde dikey olarak ortalanmasını istiyorum. …

12 javascript  html  css  vertical-alignment 

Lütfen aşağıdaki kod parçasını çalıştırmayı deneyin ve ardından kutuyu tıklayın. const box = document.querySelector('.box') box.addEventListener('click', e => { if (!box.style.transform) { box.style.transform = 'translateX(100px)' new Promise(resolve => { setTimeout(() => { box.style.transition = 'none' box.style.transform = '' resolve('Transition complete') }, 2000) }).then(() => { box.style.transition = '' }) } }) …

11 javascript  css  promise  settimeout