Question

如何使用flexbox将:before和:after内容定位到.container的边缘？

我正在尝试将<置于左侧，将>置于右侧，但这些元素应根据.container宽度对齐。

我试过了：

text-align: left;
max-width: 50%;

但不起作用。我在这里缺少什么？

* {
  margin: 0;
  padding: 0;
}
.main {
  background: #ccc;
  width: 100%;
}
.container {
  max-width: 500px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 8px 0;
}
.flexbox {
  display: flex;
  background: blue;
  justify-content: center;
  align-items: center;
}
.prev {
  border-right: 1px solid white;
}
.prev::before {
  content: '<';
}
.next::after {
  content: '>';
}
.link {
  color: white;
  padding: 16px 0;
  text-decoration: none;
  flex: 0 0 50%;
}
.link:first-child {
  padding-right: 10px;
  text-align: right;
  max-width: 50%;
}
.link:last-child {
  padding-left: 10px;
  text-align: left;
  max-width: 50%;
}

<div class="main">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam
    aut assumenda accusamus ex perferendis ipsa aperiam sapiente.
  </div>
</div>
<div class="flexbox">
  <a href="#" class="link prev">Preview</a>
  <a href="#" class="link next">Next</a>
</div>

https://jsfiddle.net/brunodd/4sq3gufn/1/

Answer 1

首先，将.flexbox放在.container：

中

<div class="main">
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi earum pariatur, sint, fugiat veniam porro deserunt laboriosam odio obcaecati, repellat numquam placeat aliquid nobis dolor temporibus. Soluta ipsam, quod consectetur tenetur quibusdam aut assumenda accusamus ex perferendis ipsa aperiam sapiente.
    <div class="flexbox">
      <a href="#" class="link prev">Preview</a>
      <a href="#" class="link next">Next</a>
    </div>
  </div>  
</div>

然后为position:absolute和::before设置::after。

.prev {
  border-right: 1px solid white;
  &::before {
    position:absolute;
    left:20px;
    content: '<';
  }
}

.next {
  &::after {
    position:absolute;
    right:20px;
    content: '>';
  }
}

将position:relative设置为.container，以便将<和>保留在其边界内：

.container {
  max-width: 500px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 8px 0 0 0;
  position:relative;
}

将.flexbox的宽度设置为100vw（视口宽度），并添加一些calc的魔法来计算负margin-left以保持.flexbox在中间：

   .flexbox {
      display: flex;
      background: blue;
      justify-content: center;
      align-items: center;
      width:100vw;
      margin-left: calc((-100vw + 100%)/2);
    }

Working example here

Answer 2

不太确定这个想法是否在下方框中。

如果是这样，那么也在flex容器上使用import UIKit class ViewController: UIViewController { let login_url = "https://sis.kemoke.net/auth/login" let checksession_url = "https://api.sis.kemoke.net" @IBOutlet var username_input: UITextField! @IBOutlet var password_input: UITextField! @IBOutlet var login_button: UIButton! var login_session:String = "/auth/login/" override func viewDidLoad() { super.viewDidLoad() username_input.text = "" password_input.text = "" let preferences = UserDefaults.standard if preferences.object(forKey: "session") != nil { login_session = preferences.object(forKey: "session") as! String check_session() } else { LoginToDo() } } @IBAction func DoLogin(_ sender: AnyObject) { if login_button.titleLabel?.text == "Logout" { let preferences = UserDefaults.standard preferences.removeObject(forKey: "session") LoginToDo() } else { login_now(username:username_input.text!, password: password_input.text!) } } func login_now(username:String, password:String) { let post_data: NSDictionary = NSMutableDictionary() post_data.setValue(username, forKey: "email") post_data.setValue(password, forKey: "password") let url:URL = URL(string: login_url)! let session = URLSession.shared let request = NSMutableURLRequest(url: url) request.httpMethod = "POST" request.cachePolicy = NSURLRequest.CachePolicy.reloadIgnoringCacheData var paramString = "" for (key, value) in post_data { paramString = paramString + (key as! String) + "=" + (value as! String) + "&" } request.httpBody = paramString.data(using: String.Encoding.utf8) let task = session.dataTask(with: request as URLRequest, completionHandler: { data, response, error in guard let _:Data = data, let _:URLResponse = response , error == nil else { return } let json: Any? do { json = try JSONSerialization.jsonObject(with: data!, options: []) } catch { return } guard let server_response = json as? NSDictionary else { return } if let data_block = server_response["data"] as? NSDictionary { if let session_data = data_block["session"] as? String { self.login_session = session_data let preferences = UserDefaults.standard preferences.set(session_data, forKey: "session") DispatchQueue.main.async(execute: self.LoginDone) } } } ) task.resume() } func check_session() { let post_data: NSDictionary = NSMutableDictionary() post_data.setValue(login_session, forKey: "session") let url:URL = URL(string: checksession_url)! let session = URLSession.shared let request = NSMutableURLRequest(url: url) request.httpMethod = "POST" request.cachePolicy = NSURLRequest.CachePolicy.reloadIgnoringCacheData var paramString = "" for (key, value) in post_data { paramString = paramString + (key as! String) + "=" + (value as! String) + "&" } request.httpBody = paramString.data(using: String.Encoding.utf8) let task = session.dataTask(with: request as URLRequest, completionHandler: { data, response, error in guard let _:Data = data, let _:URLResponse = response , error == nil else { return } let json: Any? do { json = try JSONSerialization.jsonObject(with: data!, options: []) } catch { return } guard let server_response = json as? NSDictionary else { return } if let response_code = server_response["response_code"] as? Int { if(response_code == 200) { DispatchQueue.main.async(execute: self.LoginDone) } else { DispatchQueue.main.async(execute: self.LoginToDo) } } } ) task.resume() } func LoginDone() { username_input.isEnabled = false password_input.isEnabled = false login_button.isEnabled = true login_button.setTitle("Logout", for: .normal) print("Login successful") } func LoginToDo() { username_input.isEnabled = true password_input.isEnabled = true login_button.isEnabled = true login_button.setTitle("Login", for: .normal) } }并更新max-width：

＆＃13;

justify-content

＆＃13;

* {
  margin: 0;
  padding: 0;
}

.main {
  background: #ccc;
  width: 100%;
}

.container {
  max-width: 500px;
  border: 1px solid red;
  margin: 0 auto;
  padding: 8px 0;
}

.flexbox {
  display: flex;
  background: blue;
  justify-content: space-between;
  align-items: center;
  max-width: 500px;
  margin: auto;
}

.prev::before {
  content: '<';
  padding: 0 5px;
}

.next::after {
  content: '>';
  padding: 0 5px;
}

.link {
  color: white;
  padding: 16px 0;
  text-decoration: none;
}

＆＃13;

https://jsfiddle.net/4sq3gufn/6/

或者也许这个？ https://jsfiddle.net/4sq3gufn/7/表示链接覆盖宽度的一半。

Answer 3

考虑到您对代码做了一些小调整（width: 50%而不是flex: 0 0 50%），您可以浮动他们。

https://jsfiddle.net/4sq3gufn/3/

.link {
  color: white;
  padding: 16px 10px;
  text-decoration: none;
  width: 50%;
}

.prev {
  border-right: 1px solid white;
  text-align: right;
  &::before {
    content: '<';
    float: left;
  }
}

.next {
  text-align: left;
  &::after {
    content: '>';
    float: right;
  }
}

使用flexbox限制宽度

3 个答案: