Форум

fori · #1 (**permalink**) 24.02.2021, 10:01

Здравствуйте, у меня есть текст в div-e, мне нужно чтоб родительский елемент имел width="длинна дива с текстом"
также в родительском диве есть input type="range"
мне нужно чтоб длинна дива была равна длинне родительского елемента.
Тоесть длинна инпута = длинне текста = длинне родительского елемента
Но етот код

<!DOCTYPE html>
<div class="wrapper">
<div class="text">The most long text here</div>
<input type="range">
</div>
<style>
body{
background: yellow;
}
.wrapper{
background: green;
}
.text{
font-size:20vmin;
}
input{
display:block;
width:100%;
height:1vmin;
padding:0;
margin:0;
}
</style>

делает input намного длинне чем текст... Такое чувство что width:100% родителя->родителя (тоесть в данном случае body) а не просто родителя (в данном случае wrapper)...

рони · #2 (**permalink**) 24.02.2021, 10:26

fori,

<!DOCTYPE html>
<div class="wrapper">
<div class="text">The most long text here</div>
<input type="range">
</div>
<style>
body {
    background: yellow;
}
.wrapper {
    background: green;
    display: table;
}
.text {
    font-size: 20vmin;
    display: table-row;
}
input {
    display: table-row;
    width: 100%;
    height: 1vmin;
    padding: 0;
    margin: 0;
}
</style>

fori · #3 (**permalink**) 24.02.2021, 10:44

Спасибо, а существует ли способ получить такойже результат, если во .wrapper {
display: flex;
flex-direction: column;
} вместо display:table;

рони · #4 (**permalink**) 24.02.2021, 11:22

fori,

<!DOCTYPE html>
<div class="wrapper">
<div class="text">The most long text here</div>
<input type="range">
</div>
<style>
body {
    background: yellow;
}
.wrapper {
    background: green;
    display: inline-flex;
    flex-direction: column;
}
.text {
    font-size: 20vmin;
    
}
input {
    width: 100%;
    height: 1vmin;
    padding: 0;
    margin: 0;
}
</style>

fori · #5 (**permalink**) 24.02.2021, 14:21

Спасибо, я поставил display : inline flex во всех дивах-контейнерах, но проблема с тем что [при изменении масштаба страницы увеличивается длинна input-а осталась (наиболие заметно при изменении масштаба от 100 до 200), никак не могу понять что идет не так...]

<!DOCTYPE html>
<body>
	<div class="sidebar-wrapper">
		<div class="sidebar">
			<div>Какойто длинный текст</div>
			<div class="old">
				<input type="range" class="old__range">
			</div>
		</div>
	</div>
</body>
<style>
body {
  margin: 0;
  font-size: 3vmin;
}
.sidebar-wrapper {
  height: 100vh;
  width: 40vmin;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sidebar-wrapper .sidebar {
  background: green;
  
  //display: inline-flex;
  //flex-direction: column;
  //не помогает
}
.sidebar-wrapper .sidebar .old {
  margin: 2vmin 0;
  
  //display: inline-flex;
  //flex-direction: column;
  //не помогает
}
.sidebar-wrapper .sidebar .old__range {
  appearance: none;
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: none;
  height: 1vmin;
  width: 100%;
  background: yellow;
}
.sidebar-wrapper .sidebar .old__range::-webkit-slider-thumb {
  appearance: none;
  width: 1vmin;
  height: 1vmin;
  background: red;
}
</style>

рони · #6 (**permalink**) 24.02.2021, 15:34

fori,

@media (max-width: 480px) { .sidebar-wrapper .sidebar > div {
    font-size: 1.2em;
    }}

Форум

Справочник

Discord чат

Курсы javascript