Question

我正在创建一个带有标题的iframe，两个并排的列表项和一个按钮。但是，我不能让所说的列表项并排，我也不能让它们总是填满屏幕的宽度并且宽度相等。

这是我的代码：

＆＃13;

/** GLOBAL **/

.iframe-style {
  height: 480px;
  border: solid;
  border-width: 1px;
}
.iframe_header {
  color: black;
  display: block;
  font-family: "Roboto" sans-serif;
  border-width: 1px;
}
.iframe_header h1 {
  padding-top: 10px;
  padding-left: 40px;
  font-weight: normal;
}
.iframe-style .separator {
  height: 1px;
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(255, 255, 255, 1);
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.09);
}
/** NEWS (n) */

/ .n ul {
  padding: 0px px 0px 0px;
  margin: 0;
  white-space: nowrap;
}
.n li {
  display: inline-block;
}
.n_content {
  height: 300px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 50%;
}
.n_content h2,
p {
  font-family: "Roboto" sans-serif;
}
.path {
  display: inline-block;
}
/** BUTTONS **/

.n_button {
  outline: none;
  position: relative;
  bottom: -50px;
  left: 40px;
}

＆＃13;

<head>
  <link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'>
  <link href="iframe.css" rel="stylesheet" type="text/css">
</head>


<body style="background: rgba(0, 0, 0, 0); margin: 0; padding: 0;">
  <div class="iframe-style" style="background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.33);">
    <span class="iframe_header"><h1>Welcome back!</h1></span>
    <div class="separator"></div>
    <ul class="n">
      <li>
        <span class="n_content"><h2>News</h2><p>
                                   Welcome back User!</p><p>Thanks for using Website! We are pleased to announce that we will be adding more tools in the future, contests and many tweaks to the site to improve your experience of it.</p><p>We hope you keep returning and we'll make sure you get rewarded as fast as possible for your effort!</p>
                               </span>
      </li>
      <li>
        <span class="n_content"><h2>Header 2</h2>
                               <p>Test</p>                                </span>
      </li>
    </ul>
    <button class="n_button">START COMMENTING</button>
  </div>
</body>

＆＃13;

那么我做错了什么？

Answer 1

尝试使用左手浮动。

＆＃13;

/** GLOBAL **/

.iframe-style {
  height: 480px;
  border: solid;
  border-width: 1px;
}


.iframe_header {
    color: black;
    display: block;
    font-family: "Roboto" sans-serif;
    border-width: 1px;
}

.iframe_header h1 {
    padding-top: 10px;
    padding-left: 40px;
    font-weight: normal;
}

.iframe-style .separator {
  height: 1px;
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(255, 255, 255, 1);
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.09);
}

/** NEWS (n) *//

.n ul {
    padding: 0px px 0px 0px;
    margin: 0;
    white-space: nowrap;
}

.n li {
    float : left;
    width: 50%;
}

.n_content {
    height: 300px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
}

.n_content h2,p {
    font-family: "Roboto" sans-serif;
}

.path {
    display: inline-block;
}

/** BUTTONS **/

.n_button {
    outline: none;
    position: relative;
    bottom: -50px;
    left: 40px;
}

＆＃13;

<head>
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,400|Roboto+Condensed:700italic,400' rel='stylesheet' type='text/css'>
    <link href="iframe.css" rel="stylesheet" type="text/css">
</head>
   

    <body style="background: rgba(0, 0, 0, 0); margin: 0; padding: 0;">
                   <div class="iframe-style" style="background: rgba(255, 255, 255, 0.72); border-color: rgba(255, 255, 255, 0.33);">
                    <span class="iframe_header"><h1>Welcome back!</h1></span>
                    <div class="separator"></div>
                       <ul class="n">
                           <li>
                               <span class="n_content"><h2>News</h2><p>
                                   Welcome back User!</p><p>Thanks for using Website! We are pleased to announce that we will be adding more tools in the future, contests and many tweaks to the site to improve your experience of it.</p><p>We hope you keep returning and we'll make sure you get rewarded as fast as possible for your effort!</p>
                               </span>
                           </li>
                           <li>
                               <span class="n_content"><h2>Header 2</h2>
                               <p>Test</p>                                </span>
                           </li>
                       </ul>
                       <button class="n_button">START COMMENTING</button>
                  </div>
    </body>

＆＃13;

列出拒绝不包装的物品

1 个答案: