Question

我目前正在尝试理解HTML和CSS的基本概念，并且遇到了一个非常特殊的问题。我有两个元素显示：内联，另一个具有显示：inline-block。我正在尝试创建一个列表，1. SOME CONTENT THAT WILL OCCUPY MORE THAN ONE LINE这种类型，我将数字作为内联元素，并将相应的内容作为内联块。我不想使用<ul>或<ol>，因为它涉及相当深奥的CSS，考虑到我所在的位置，我还没有准备好它们。

我的问题是，如果inline块元素的内容不止一行，那么为什么inline-block元素单独出现在一行上？据我了解，内联和内联块元素的宽度受内容的限制。

我尝试将vertical-align：top设置为最大值，但无济于事。我在堆栈溢出上看了这个问题：Why does the innerHTML of several inline-blocks nested in a block element affect the positioning of the inline-blocks?。

#numeral{
display: inline;
}

#content {
display: inline-block;
vertical-align: top;
}

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"     charset="utf-8">
        <title>Test</title>
        <link rel="stylesheet" href="./test.css"/>
      </head>
      <body>
    <span id="numeral">1.</span>
    <span id="content">BLAH BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH      BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH                                   BLAH</span>

  </body>
</html>

我希望下一行直接在inline-block元素下面开始，但这没有发生。我应该如何达到这种效果？

Answer 1

内联块元素作为内联元素放置（即与相邻内容位于同一行）。仅当其宽度适合剩余空间时。

为了更好地理解这一点，请指定#content的宽度，使其适合于#numeral旁边（显示：inline-block允许在元素上设置宽度和高度），如下所示：

class Weather extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      recentCities: [],
      details: [],
      isOpen: true,
      myRefs: '',
      video: '',
      city: ''
    };

    this.updateInputValue = this.updateInputValue.bind(this);
    this.getRefsFromChild = this.getRefsFromChild.bind(this);
    this.resetSearch = this.resetSearch.bind(this);
    this.getWeather = this.getWeather.bind(this);
  }

  updateInputValue = (e) => {
    ...
  }

  resetSearch = () => {
    console.log(this.state.myRefs.current);

    this.setState({
      isOpen: !this.state.isOpen,
      details: [],
      video: []
    });
  }

  getWeather = (e) => {
    ...
  }

  getRefsFromChild = (childRefs) => {
    ...
  }

  render() {
    return (
      <section className={style.container}>
        <div className={style.weatherMain + ' ' + style.bodyText}>
          <video key={this.state.video} className={style.video} loop autoPlay muted>
            <source src={this.state.video} type="video/mp4">
            </source>
            Your browser does not support the video tag.
          </video>
          <div className={style.hold}>
            <div className={style.weatherLeft}>
              <WeatherForm
                updateInputValue={this.updateInputValue}
                getWeather={this.getWeather}
                passRefUpward={this.getRefsFromChild}
                resetSearch={this.resetSearch}
                isOpen={this.state.isOpen}

              />
              <WeatherList
                details={this.state.details}
                city={this.state.city}
                isOpen={this.state.isOpen}
              />
            </div>
            <div className={style.weatherRight}>
              <Sidebar
                recentCities={this.state.recentCities}
              />
            </div>
            <div className={style.clear}></div>
          </div>
        </div>
      </section>
    );
  }
}


class WeatherForm extends React.Component {
  constructor(props) {
    super(props);
    this.city = React.createRef();
  }

  componentDidMount() {
    this.props.passRefUpward(this.city);
    this.city.current.focus();
  }

  render() {
    if (this.props.isOpen) {
      return (
        <div className={style.weatherForm}>
          <form action='/' method='GET'>
            <input 
              ref={this.city} 
              onChange={this.props.updateInputValue} 
              type='text' 
              placeholder='Search city' 
            />
            <input 
              onClick={e => this.props.getWeather(e)} 
              type='submit' 
              value='Search' 
            /> 
          </form>
        </div>
      )
    } else {
      return (
        <div className={style.resetButton}>
          <p>Seach another city?</p>
          <button 
            onClick={this.props.resetSearch}>Search
          </button>
        </div>
      );
    }
  }
}

export default Weather;

Answer 2

inline-block *不会与另一个元素共享行内空格，如果您不给它一个宽度。因此，要么inline都是草率的，要么将inline-block，widths和vertical-align用于较小的内容，例如#numeral。请注意，#numeral的宽度为2ch，ch的单位大约是字符的宽度，有关确切说明，请参见此article

* _{当其内容超出其元素的父元素宽度时的宽度}

演示

#numeral {
  display: inline-block;
  width:2ch;
  vertical-align:top
}

#content {
  display: inline-block;
  width:90%;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
  <title>Test</title>
</head>

<body>
  <span id="numeral">1.</span>
  <span id="content">BLAH BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH      BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH </span>
</body>

</html>

Answer 3

如果要减少“空白”文本的长度，您会发现您的标记符合您的期望。但这并不能解决从display: inline-block id选择器中删除#content css属性的全部问题，将获得类似的结果。再次的问题是为什么？

答案在于您提出的一个非常中心的问题：如果内联块元素的内容不止一行，那么为何内联块元素单独出现在一行上？您应该努力回答并理解此查询，因为它会带来令人满意的答案。

答案是为了更好地理解HTML5和CSS3的三个至关重要的元素，如果您希望使用Web开发工具来满足自己的需要，它们是：normal flow，css box model，{ {3}}和visual formatting model。

除了我已经在MDN上提供的资源之外，还可以在freecodecamp.org的响应式Web设计课程下找到大量的免费资源，这些资源可以使您充分了解这些基础知识。他们敏捷而有见地。 block formatting context还为研究和示例提供了很好的资源。

掌握这些基本概念将为您提供解决这些问题所需的武器库，我已按学习顺序提供了它们。

Answer 4

好吧，首先，第二个跨度使用</div>的结束标记设为</span>

如果是数字/项目符号结构，则不知道要做什么，但是可以使两个跨度都显示inline：

#content, #numeral {
 display: inline;
}

为什么inline-block元素出现在inline元素下方？如何使它们显示在同一行上？

4 个答案:

演示