Question

我一直在尝试和尝试，并且找不到通过两个子弹点列表并排坐下的方法。

以下是实际网页：http://kaleshe.github.io/sharing-is-caring/

这是整个部分的代码：

        <span class="anchor"><a name="whatisdepression"</a></span>
        <div id="content-container">
            <section id="first" class="content">
                <h2>What is depression?</h2>
                    <p>Depression is not just feeling down or sad, it's more than that.
                    A person experiencing depression will experience intense, negative emotions such as; anxiety, hopelessness, 
                        negativity and helplessness, these emotions stay with them instead of going away. Depression can be quite difficult 
                        to spot, many people who have depression do not even realise it themselves.</p>

                <h3 id="sas" class="banner">Signs & Symptoms</h3>
                    <ul>
                        <li>Fatigue and loss of energy</li>
                        <li>Constant sadness</li>
                        <li>Loss of self-confidence 
                            and self-esteem</li>
                        <li>Difficulty concentrating</li>
                        <li>Loss of pleasure in activities</li>
                        <li>Feeling anxious all the time</li>
                        <li>Feelings of helplessness 
                            and hopelesness</li>
                    </ul>   
                    <ul id="right">
                        <li>Excessive feelings of guilt 
                            or worthlessness</li>
                        <li>Avoiding others</li>
                        <li>Finding it hard to function</li>
                        <li>Loss of appetite</li>
                        <li>Loss of sex drive</li>
                        <li>Physical aches and pains</li>
                        <li>Suicidal thoughts</li>  
                        <li>Self-harm</li>
                    </ul>

                <h3 id="wci" class="banner">What causes it?</h3>
                    <p>A number of different factors can increase the chance of a person becoming depressed; such as difficult 
                    events and experiences that lower their spirits, instead of their spirits rising naturally as they should, 
                    they stick around much longer and become problematic. It is also possible to feel down without there being 
                    an obvious reason.</p>
            </section>

以下是相关的 CSS：

body {
    margin: auto 0;
    font-family: 'Montserrat', sans-serif;
    max-width: 100%;
}

.content, nav {
    font-size: 1.1em;
}

.content {
    height: 1080px;
    max-width: 1560px;
    margin: auto;
    line-height: 1.5em;
    padding-top: 100px;
}

.banner {
    background-color: #000e2d;
    color: #fff;
    width: 230px;
    margin: 0;
    display: inline-block;
    padding: 10px 20px 10px 100px;
    letter-spacing: 0.09em;
    text-align: center;
    margin-top: 10px;
    }

#secondbg {
    background-color: #e2e2e2;
    max-width: 100%;
}

Answer 1

将两个ul换成一个单独的div，然后应用display:inline-block和vertical-align:top。

JSFiddle Demo

＆＃13;

body {
  margin: auto 0;
  font-family: 'Montserrat', sans-serif;
  max-width: 100%;
}
.content,
nav {
  font-size: .95em;
  /* for demo */
}
.menu-wrap ul {
  display: inline-block;
  vertical-align: top;
}
.content {
  height: 1080px;
  max-width: 1560px;
  margin: auto;
  line-height: 1.5em;
  padding-top: 10px;
  /* for demo */
}
.banner {
  background-color: #000e2d;
  color: #fff;
  width: 230px;
  margin: 0;
  display: inline-block;
  padding: 10px 20px 10px 100px;
  letter-spacing: 0.09em;
  text-align: center;
  margin-top: 10px;
}
#secondbg {
  background-color: #e2e2e2;
  max-width: 100%;
}

＆＃13;

<span class="anchor"><a href="#first"></a></span>
<div id="content-container">
  <section id="first" class="content">
    <h2>What is depression?</h2>
    <p>Depression is not just feeling down or sad, it's more than that. A person experiencing depression will experience intense, negative emotions such as; anxiety, hopelessness, negativity and helplessness, these emotions stay with them instead of going
      away. Depression can be quite difficult to spot, many people who have depression do not even realise it themselves.</p>

    <h3 id="sas" class="banner">Signs & Symptoms</h3>
    <div class="menu-wrap">
      <ul>
        <li>Fatigue and loss of energy</li>
        <li>Constant sadness</li>
        <li>Loss of self-confidence and self-esteem</li>
        <li>Difficulty concentrating</li>
        <li>Loss of pleasure in activities</li>
        <li>Feeling anxious all the time</li>
        <li>Feelings of helplessness and hopelesness</li>
      </ul>
      <ul id="right">
        <li>Excessive feelings of guilt or worthlessness</li>
        <li>Avoiding others</li>
        <li>Finding it hard to function</li>
        <li>Loss of appetite</li>
        <li>Loss of sex drive</li>
        <li>Physical aches and pains</li>
        <li>Suicidal thoughts</li>
        <li>Self-harm</li>
      </ul>
    </div>
    <h3 id="wci" class="banner">What causes it?</h3>

    <p>A number of different factors can increase the chance of a person becoming depressed; such as difficult events and experiences that lower their spirits, instead of their spirits rising naturally as they should, they stick around much longer and become
      problematic. It is also possible to feel down without there being an obvious reason.</p>
  </section>

＆＃13;

Answer 2

您可以float width ul <div class="list-holder"> <ul> // liste items will go here.. </ul> <ul> // liste items will go here.. </ul> </div> .list-holder { overflow: hidden; } .list-holder { box-sizing: border-box; padding: 15px 20px; float: left; width: 50%; margin: 0; }使用以下样式和结构。

body {
    margin: auto 0;
    font-family: 'Montserrat', sans-serif;
    max-width: 100%;
}

.content, nav {
    font-size: 1.1em;
}

.content {
    height: 1080px;
    max-width: 1560px;
    margin: auto;
    line-height: 1.5em;
    padding-top: 100px;
}

.banner {
    background-color: #000e2d;
    color: #fff;
    width: 230px;
    margin: 0;
    display: inline-block;
    padding: 10px 20px 10px 100px;
    letter-spacing: 0.09em;
    text-align: center;
    margin-top: 10px;
    }

#secondbg {
    background-color: #e2e2e2;
    max-width: 100%;
}

.list-holder {
  overflow: hidden;
}

.list-holder ul {
  box-sizing: border-box;
  padding: 15px 20px;
  float: left;
  width: 50%;
  margin: 0;
}

＆＃13;

<span class="anchor"><a name="whatisdepression"</a></span>
        <div id="content-container">
            <section id="first" class="content">
                <h2>What is depression?</h2>
                    <p>Depression is not just feeling down or sad, it's more than that.
                    A person experiencing depression will experience intense, negative emotions such as; anxiety, hopelessness, 
                        negativity and helplessness, these emotions stay with them instead of going away. Depression can be quite difficult 
                        to spot, many people who have depression do not even realise it themselves.</p>

                <h3 id="sas" class="banner">Signs & Symptoms</h3>
                <div class="list-holder">
                    <ul>
                        <li>Fatigue and loss of energy</li>
                        <li>Constant sadness</li>
                        <li>Loss of self-confidence 
                            and self-esteem</li>
                        <li>Difficulty concentrating</li>
                        <li>Loss of pleasure in activities</li>
                        <li>Feeling anxious all the time</li>
                        <li>Feelings of helplessness 
                            and hopelesness</li>
                    </ul>   
                    <ul>
                        <li>Excessive feelings of guilt 
                            or worthlessness</li>
                        <li>Avoiding others</li>
                        <li>Finding it hard to function</li>
                        <li>Loss of appetite</li>
                        <li>Loss of sex drive</li>
                        <li>Physical aches and pains</li>
                        <li>Suicidal thoughts</li>  
                        <li>Self-harm</li>
                    </ul>
                 </div>

                <h3 id="wci" class="banner">What causes it?</h3>
                    <p>A number of different factors can increase the chance of a person becoming depressed; such as difficult 
                    events and experiences that lower their spirits, instead of their spirits rising naturally as they should, 
                    they stick around much longer and become problematic. It is also possible to feel down without there being 
                    an obvious reason.</p>
            </section>

＆＃13;

{{1}}

＆＃13;

Answer 3

你只需要添加：

ul {
    display: inline-block;
}

如果只是列表的话。如果你也想要标题，那么在列表周围添加一个容器，并为它们添加标题并应用样式 - display：inline-block;那个。使用.list-wrap

的类包装器，以下面的示例

.list-wrap ul {
   display: inline-block;
}

如果有帮助，请告诉我

不能让我的子弹指向并排坐着

3 个答案: