как добавить что-то в одну строку? - PullRequest
Новая
       0

как добавить что-то в одну строку?

0 голосов
/ 30 августа 2018 

header {
  background-color: red;
  border: 5px solid green;
}

img {
  box-sizing: border-box;
  padding: 10px;
  height: 80%;
  border: 2px solid yellow;
}

nav {
  border: 2px solid yellow;
  height: 80%;
  padding: 10px;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  overflow: auto;
  border: 2px solid white;
  padding: 0;
}

div {
  border: 2px solid blue;
  display: flex;
  height: 200px;
  width: 50%;
  align-items: center;
}

li {
  float: left;
  margin: 30px;
}
<body>
  <header>
    <div>
      <img src="image.png" alt="Logo" />
      <nav>
        <ul>
          <li><a href="https://google.com">Google</a></li>
          <li><a href="https://facebook.com">Facebook</a></li>
          <li><a href="https://yahoo.com">Yahoo</a></li>
        </ul>
      </nav>
    </div>
  </header>
</body>

Я хочу добавить некоторый элемент (например, тег div) в той же строке, внутри тега header , но не могу, потому что тег div занимает всю ширину. Но, как я догадался, div не является причиной, display: flex не позволяет мне добавлять что-либо к той же строке.

Ответы [ 2 ]

0 голосов
/ 30 августа 2018 

.table {
  display: table;
  width: 100%;
}

.cell1,
.cell2 {
  display: table-cell;
  vertical-align: middle;
}

header {
  background-color: red;
  border: 5px solid green;
}

img {
  box-sizing: border-box;
  padding: 10px;
  height: 80%;
  border: 2px solid yellow;
}

nav {
  border: 2px solid yellow;
  height: 80%;
  padding: 10px;
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  overflow: auto;
  border: 2px solid white;
  padding: 0;
}

li {
  float: left;
  margin: 30px;
}
<header>
  <div class="table">
    <div class="cell1">
      <img src="image.png" alt="Logo" />
    </div>
    <div class="cell2">
      <nav>
        <ul>
          <li><a href="https://google.com">Google</a></li>
          <li><a href="https://facebook.com">Facebook</a></li>
          <li><a href="https://yahoo.com">Yahoo</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>
0 голосов
/ 30 августа 2018

, поскольку вы хотите, чтобы у div был «родной брат», вам нужно переместить display: flex; к родительскому элементу, который в вашем случае является заголовком. Затем объявите, сколько flex вы хотите для каждого ребенка. 

<body>
  <header>
    <div id="left">
    <img src="image.png" alt="Logo"/>
      <nav>
        <ul>
          <li><a href="https://google.com">Google</a></li>
          <li><a href="https://facebook.com">Facebook</a></li>
          <li><a href="https://yahoo.com">Yahoo</a></li>
        </ul>
      </nav>
    </div>
    <div id="right">hello</div>
  </header>
</body>

- 

header{
  background-color:red;
  border:5px solid green;
  display:flex;
}

div{
  border:2px solid blue;
  height: 200px;
  width:50%;
  align-items: center;
}

#left {
  flex: 1;
}

#right {
  flex: 1;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...