Как настроить li на ul в меню боковой панели? - PullRequest
Новая
       0

Как настроить li на ul в меню боковой панели?

0 голосов
/ 21 апреля 2020

Так что у меня есть простой список ul. Что я должен сделать, чтобы li удерживал 100% ширины ul? Пожалуйста помоги! Я пытался использовать flex-base и flex-drow, но это не помогло. И также это должно быть сделано в чистом CSS. 

body{
    margin: 0px;
    height: 100%;
}
.container{
    display: flex;
}
.navigation{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 20vh;
    height: 100vh;
    text-align:justify;
}
ul li{
border: 1px solid blue;
position: relative;
    list-style-type: none;
    text-align: center;
    
}
ul{
    border: 1px solid blue;
    height: 60vh;
    display: flex;
    flex-direction: column;
    }
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
    <div class="contaniner first">
        <div class="navigation">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
</html>

Ответы [ 4 ]

0 голосов
/ 21 апреля 2020

я пытаюсь решить ваш вопрос, вот ваш ответ ...... 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>

    <style>
        body{
    margin: 0px;
    height: 100%;
}
div .container{
    display: flex;
}
div .navigation{
    display: flex;
    text-align: center;
    text-align:justify;
}
ul li{
border: 1px solid blue;
position: relative;
    list-style-type: none;
    text-align: center;
    flex-direction: column;
    width: 20vh;
    height: 10vh;
}
ul{
    display: flex;

    }
    </style>
</head>
<body>
    <div class="contaniner first">
        <div class="navigation">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
</html>
0 голосов
/ 21 апреля 2020

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>
    <div class="contaniner first">
        <nav>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </nav>
    </div>
</html>

CSS

body{
    margin: 0px;
    height: 100%;
}

nav ul{
    border: 1px solid blue;
    display:flex;
    padding:5px;
}

nav ul li{
    border: 1px solid red;
    text-align: center;
    list-style:none;
    width:100%;
}

Вы можете удалить display:flex, как хотите, и это решит вашу проблему.

0 голосов
/ 21 апреля 2020

Вы должны удалить заполнение из тега ul . 

	body{
    margin: 0px;
    height: 100%;
}
.container{
    display: flex;
}
.navigation{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 20vh;
    height: 100vh;
    text-align:justify;
}
ul li{
border: 1px solid blue;
position: relative;
    list-style-type: none;
    text-align: center;
    
}
ul{
    border: 1px solid blue;
    height: 60vh;
    display: flex;
    flex-direction: column;
    }
	
ul{
 padding: 0px;
}
  <div class="contaniner first">
        <div class="navigation">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>
0 голосов
/ 21 апреля 2020 

ul {
  border: 1px solid blue;
 }
 
 li {
  border: 1px solid red;
  width: 100%;
 }
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>1</li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...