Question

我的布局（check on codepen）的代码如下：

HTML：

epochs = 10
batch_size = 64
avg_loss = []

with train_graph.as_default():
    saver = tf.train.Saver()

with tf.Session(graph=train_graph) as sess:
  iteration = 1
  loss = 0
  sess.run(tf.global_variables_initializer())

  for e in range(1, epochs+1):
    batches = skip_gram_batcher.get_batches(batch_size)
    start = time.time()
    for  batch_x,batch_y  in batches:

      feed = {inputs: batch_x, 
             labels: np.array(batch_y)[:, None]}
      train_loss, _ = sess.run([cost, optimizer], feed_dict=feed)
      loss += train_loss

      if iteration % 100 == 0: 
        end = time.time()
        print("Epoch {}/{}".format(e, epochs),
                "Iteration: {}".format(iteration),
                "Avg. Batch loss: {:.4f}".format(loss/iteration),
                "{:.4f} sec/batch".format((end-start)/100))
        #loss = 0
        avg_loss.append(loss/iteration)
        start = time.time()

      iteration += 1

  save_path = saver.save(sess, "checkpoints/text8.ckpt")

SCSS：

<div class="line-up">

  <!--line up list-->
  <ul class="line-up__list">

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Anetha"><strong>Anetha</strong></a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Antigone &amp; Shlømo présentent Luxor (Live) "><strong>Antigone &amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Bonaventure"><strong>Bonaventure</strong></a></li>

    <!--line-up item-->
    <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Ciel"><strong>Ciel</strong></a></li>
  </ul>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  display: flex;
  flex-wrap: wrap;

  list-style-type: none;
}

.line-up__item {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;

  line-height: 1.45;

  //decoration element
  &:after {
    margin-left: 3px;

    font: {
      size: 25px;
    }

    content: '•';
  }

  &:last-child {

    &:after {
      display: none;
    }
  }
}

//line up links styles
a.line-up__link {

  //bigger item styles
  strong {
    display: inline-block;
    margin: 0 3px;

    font: {
      size: 19px;
    }

    &:first-child {
      margin-left: 0;
    }
  }
}

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.line-up__item {
  display: inline-flex;
  align-items: center;
  margin-right: 3px;
  line-height: 1.45;
}

.line-up__item:after {
  margin-left: 3px;
  font-size: 25px;
  content: '•';
}

.line-up__item:last-child:after {
  display: none;
}

a.line-up__link strong {
  display: inline-block;
  margin: 0 3px;
  font-size: 19px;
}

a.line-up__link strong:first-child {
  margin-left: 0;
}

问题是一个长链接，它不会中断并且留下很多空白：我只想将此文本分成两行而没有<div class="line-up">  <ul class="line-up__list">  <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Alva Noto Unieqav (Live)">Alva Noto Unieqav(Live)</a></li>  <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Anetha">Anetha</a></li>  <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Antigone & Shlømo présentent Luxor (Live) ">Antigone & ShlømoprésententLuxor(Live)</a></li>  <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Bonaventure">Bonaventure</a></li>  <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Ciel">Ciel</a></li> </ul> </div>标签或其他东西，因为此布局必须是响应式的。有什么方法可以使链接可断开？

Answer 1

只需使元素inline并删除flexbox。由于元素是块级元素，因此无法使用flexbox实现所需的功能

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.line-up {
  max-width: 600px;
  margin: 40px auto 0px auto;
  padding: 20px;
  background-color: #e8c0a0;
}

.line-up__list {
  list-style-type: none;
}

.line-up__item {
  display: inline;
  align-items: center;
  margin-right: 3px;
  line-height: 1.45;
}
.line-up__item:after {
  margin-left: 3px;
  font-size: 25px;
  content: '•';
  vertical-align:middle; /*added this too*/
}
.line-up__item:last-child:after {
  display: none;
}

a.line-up__link strong {
  display: inline-block;
  margin: 0 3px;
  font-size: 19px;
}
a.line-up__link strong:first-child {
  margin-left: 0;
}

<div class="line-up">

      <!--line up list-->
      <ul class="line-up__list">
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Alva Noto Unieqav (Live)"><strong>Alva Noto Unieqav</strong>(Live)</a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Anetha"><strong>Anetha</strong></a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Antigone &amp; Shlømo présentent Luxor (Live) "><strong>Antigone &amp; Shlømo</strong>présentent<strong>Luxor</strong>(Live)</a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Bonaventure"><strong>Bonaventure</strong></a></li>
        
        <!--line-up item-->
        <li class="line-up__item"><a class="line-up__link" href="line-up-details.html" title="Ciel"><strong>Ciel</strong></a></li>
      </ul>
    </div>

弹性项目和换行符

1 个答案: