0

Имеется html:

<li id="parent">
    <a id="left">Description</a>
    <a id="right">x</a>
</li>

Задача заключается в том, чтобы прижать ссылку "right" (имеющую фиксированную ширину) к правому краю, а все остальное место заполнить ссылкой "left". Собственно проблема возникает с заполнением места

Первое что пробовал это поцизионирование http://jsbin.com/gapayukiva/1/edit?html,output однако в этом случае не получается заполнить пространство, в бине это видно, есть display поставить block, то ссылка "right" вовсе уходит за поток

Потом пробовал плавающие элементы, проблема та же http://jsbin.com/pijenuz/2/edit?html,output

Еще был вариант с display: flex и justify-content: space-between, но и там тоже самое

0

3 ответа 3

1

Воспользуйтесь вариантом с display: inline-flex и justify-content: space-between.

В этом случае к id #left добавьте flex-grow: 1 (или flex: 1)

#parent
display: inline-flex
width: 100%
justify-content: space-between
#left
    flex-grow: 1
#right
    width: 300px
1

Если известна ширина .right то можно так:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    li {
      border: 1px solid;
    }
    a {
      border: 1px solid red;
    }
    #parent {
      display: block;
      position: relative;
      width: 200px;
    }
    #left {
      display: inline-block;
      right:20px;
      left:0px;
      position: absolute;
    }
    #right {
      display: inline-block;
      position: absolute;
      width:20px;
      right:0;
    }
  </style>
</head>
<body>
<ul>
      <li id="parent">
        <a id="left">Description</a>
        <a id="right">x</a>
      </li>
</ul>
</body>
</html>

1

для #right необходимо добавить top: 0;

li {
  border: 1px solid;
}

a {
  border: 1px solid red;
}

.parent {
  display: block;
  position: relative;
  width: 200px;
  margin-bottom: 25px;
}

.left {
  display: block;
  padding-right: 20px;
}
.right {
  display: inline-block;
  position: absolute;  
  right: 0;
  width: 20px;
  text-align: center;
}
.right-custom{
  top: 0;
}
<ul>
  <li class="parent">
    <a class="left">Без top: 0;</a>
    <a class="right">x</a>
  </li>  
</ul>
<ul>
  <li class="parent">
    <a class="left">C top: 0;</a>
    <a class="right right-custom">x</a>
  </li>  
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.